我有5张照片(gif)从数据库中随机拍摄。我有状态PressedGif,它定义了被点击照片的索引。我想向每个对象添加onclick事件(在for循环中):
export default function GameObject(props) {
const addedToGameGif = [];
const PhotoCards = [];
const [pressedGif, gifPressed] = useState(-1);
useEffect(() => {
console.log('HELLO');
}, []);
// get random photos to addedToGameGif array
// ...
for (let i = 0; i < addedToGameGif.length; i += 1) {
PhotoCards.push(
<div>
<Card
id={i}
onClick={() => gifPressed(i)}>
<img src={addedToGameGif[i]} />
</Card>
</div>,
);
}
return <div>{PhotoCards}</div>;
}
我成功在控制台中收到HELLO消息,但问题是我随机选择的照片也更改为其他照片。那么如何防止重新加载照片和调用随机选择照片的功能呢?
在每个渲染器上,您正在重新生成随机gif图像阵列。您可以一次使用useMemo
生成gif数组:
const addedToGameGif = useMemo(() => /* generate the array of gifs */, []);