React / NextJS - onClick目标所有映射项目-我如何目标只是一个?

Question

我找不到更好的方式来描述我所遇到的问题，如果这个问题经常被问到，我很抱歉。

代码是这样的:

const [isFlipped, setFlipped] = useState(false);
const flip = () => {
if (!isFlipped) {
setFlipped(true);
} else {
setFlipped(false);
}
};
return(
data.map((product) => (
<div 
onClick={()=> flip()}
animate={isFlipped && { rotateY: 180 }}
>
<p>{product.name}</p>
<p>{product.info}</p>
</div>
));
)

我希望flip()函数只在被点击的div上工作，但是目前它影响每个映射的div。

Answer 1

Edit(在看到flip函数之后):你应该让它成为一个单独的组件，这样每个子组件都有自己的isFlipped State。然后用产品作为道具来映射和创建组件。

为映射中的div添加一个键以增加唯一性。

data.map((product, key) => (
<div key={key} onClick={()=> flip()}>
<p>{product.name}</p>
<p>{product.info}</p>
</div>
));