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

Question

我有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;

Answer 1

你可以发送一个变量(状态)给Card组件作为道具"displayAxios"，默认值为false。然后你可以用handleClick来改变状态。

在Card组件中，使用基于prop的三进制来显示或不显示内容。