reactjs - 当我们点击数据时如何显示并发送相同的数据到另一个页面

问题描述

我有Card组件来显示来自 Axios 的数据，然后我想Card在另一个页面中单击时显示数据。我应该怎么办？

Sidebar.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Card from './Card';

const SideBar = () => {
  const [menuItem, setMenuItem] = useState([]);

  const url = 'https://blalalalalalla';
  const [categories, setCategories] = useState([]);
  useEffect(() => {
    getIconApp('All Categories');
    getCategory();
  }, []);

  const getIconApp = (type) => {
    axios
      .get(`${url}`)
      .then((res) => {
      
        const allIconApp = res.data;
        if (type === 'All Categories') {
          setMenuItem(allIconApp);
        
        } else {
          const filteredData = allIconApp.filter(
            (app) => app.category === type
          );
          setMenuItem(filteredData);
        }
      })
      .catch(function (error) {
    
        console.log(error);
      });
  };

  return (
    <div className="flex">
      <div className="container">  
          <Card menuItem={menuItem} />
      </div>
    </div>
  );
};

export default SideBar;

Card.js

import React from 'react';
import { Link } from 'react-router-dom';
const Card = ({ menuItem }) => {

  return (
    <>
      <div className="flex flex-wrap">
     
          <div className="grid grid-cols-3 md:grid-cols-3 grid-rows-2 md:grid-rows-2 gap-x-9 md:gap-x-6  ">
            {menuItem.map((app, index2) => (
              <div
                className="flex text-sm my-4 pt-4 rounded-md relative "
                style={{
                  width: 348,
                  height: 168,
                  backgroundColor: `${app.color}`,
                  cursor: 'pointer',
                }}
              >
                <Link to="/details">
                  <div className="pl-4">
                    {/* {console.log(app.imageUrl[1].card)} */}
                    <div
                      style={{
                        width: 64,
                        height: 64,
                        borderRadius: 16,
                        boxShadow: `0px 4px 8px 2px rgba(3, 21, 49, 0.06)`,
                        marginBottom: 8,
                      }}
                    >
                      <img
                        src={app.imageUrl[0].icon}
                        alt=""
                        style={{ width: 64, borderRadius: 16 }}
                        className=""
                      />
                    </div>

                    <h2>{app.name}</h2>
                    <p className="text-base-7 text-2">{app.type}</p>
                  </div>
                  <div className="">
                    <img
                      src={app.imageUrl[1].card}
                      alt={app.name}
                      className="absolute bottom-0 right-6"
                      style={{ marginLeft: 60, width: 164 }}
                    />
                  </div>
                </Link>
              </div>
            ))}
          </div>
      </div>
    </>
  );
};

export default Card;

标签： reactjsaxiosreact-router

reactjs - 当我们点击数据时如何显示并发送相同的数据到另一个页面

问题描述

解决方案

推荐阅读