在 React 中调用 useEffect 时，照片会重新加载

Question

我从数据库中随机拍摄了 5 张照片(gif(。我有状态按下的Gif，它定义了点击的照片的索引。我想将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消息，但问题是我随机选择的照片也更改为不同的照片。那么如何防止照片重新加载和调用随机选择照片的函数呢？

Answer 1

我会推荐这样的东西：

import React from 'react';
const PhotoCard = props => {
const [addedToGameGif, setAddedToGameGif] = React.useState([]);
const [pressedGif, setPressedGif] = React.useState(-1);
// set random pictures
React.useEffect(() => {
const setRandomGifs = () => {
let randomGifs = [];
// make request to get random gifs
// some loop () {
// randomGifs.push(randomGif);
// }
setAddedToGameGif(randomGifs);
};
setRandomGifs();
}, []);
return (
<>
{addedToGameGif.map((gif, index) => {
return (
<Card
id={index}
onClick={() => setPressedGif(index)}
key={'photo-card-' + index}
>
<img src={gif[index]} alt={'card-img' + index} />
</Card>
);
})}
</>
);
};
export default PhotoCard;

如果这不起作用，请检查您的组件是否经常从父组件更改他的 props，以便每次发生这种情况时都会调用 useEffect-Hook。

Answer 2

这个解决方案对我有用！(组件安装(

React.useEffect(() => {
//Your code
}, [])