在 React 中调用 useEffect 时重新加载照片答案

【问题标题】：Photos reload when useEffect is called in React在 React 中调用 useEffect 时重新加载照片
【发布时间】：2020-01-17 12:53:41
【问题描述】：

我从数据库中随机获取了 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 消息，但问题是我随机挑选的照片也变成了不同的照片。那么如何防止照片重新加载和调用随机选择照片的函数呢？

【问题讨论】：

gifPressed 正在导致状态更改，这反过来又会每次都调用您的// get random photos to addedToGameGif array。一种选择是将 PhotoCards 存储在内部状态，并检查长度是否为 0，然后仅创建数组。
请添加从数据库中获取图像的代码。
别忘了将 key 添加到子数组中，这就是 react 知道每个不同子元素的方式。
感谢@Keith，将数组声明移动到状态有帮助。

标签： reactjs react-hooks use-effect use-state

【解决方案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。

【讨论】：

谢谢，将数组声明移动到状态有帮助。

【解决方案2】：

这个解决方案对我有用！ (componentDidMount)

React.useEffect(() => {

   //Your code

}, [])

【讨论】：