如何使用onClick按钮更改地图内单个项目的React状态

Question

每当我点击一个项目上的按钮时，我都试图为它设置状态。我有一个在产品列表上运行的地图，它返回一张带有按钮的卡片。我想点击按钮，然后将变量设置为项目所需的变量。例如：

const [isShown, setIsShown] = useState(false) // the state. obviously, it's going to show the result on every card inside that map.
let handleClick = (id: number) => {
getAmountOfTimesPurchased(id) // a function that returns a number
}
return (
<div> 
{products.map((product: IProduct) => {
return <Card key={product.id}>
<Card.Body>
<Card.Text>
<Card.Title>
{product.name}
</Card.Title>
${product.price}
<br />
{product.amount}
</Card.Text>
</Card.Body>
<Card.Footer>
<Button onClick={() => {
handleClick(product.id)
}}>Purchased For:</Button>{isShown && timesPurchased}
</Card.Footer>
</Card>
})}
</div>
)

那么，我怎样才能只显示我正在点击的卡片的结果呢？

非常感谢您提前提供的帮助！

Answer 1

不是所有渲染卡都在使用的单个isShown状态，而是存储单击的卡的id并与提取的数据关联。

示例：

const [isShownId, setIsShownId] = useState(null);
const handleClick = (id: number) => {
getAmountOfTimesPurchased(id);
setIsShownId(id);
};
return (
<div> 
{products.map((product: IProduct) => {
return (
<Card key={product.id}>
...
<Card.Footer>
<Button
onClick={() => {
handleClick(product.id);
}}
>
Purchased For:
</Button>
{isShownId === product.id && timesPurchased}
</Card.Footer>
</Card>
);
})}
</div>
);