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

Posted

技术标签:

【中文标题】在 React 中调用 useEffect 时重新加载照片【英文标题】:Photos reload when useEffect is called in React 【发布时间】: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,将数组声明移动到状态有帮助。 【参考方案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

, [])

【讨论】:

以上是关于在 React 中调用 useEffect 时重新加载照片的主要内容,如果未能解决你的问题,请参考以下文章

如何在 react 中的新路由更改上使用 useEffect 重新渲染变量

React:在 useEffect 中调用上下文函数时防止无限循环

如何在 React 的 UseEffect() 中调用异步函数?

React useEffect() 无限重新渲染以获取所有尽管有依赖关系

返回屏幕时未在 React Native 中调用 useEffect

D3 + React hooks + useEffect() - 防止在 mouseout 时重复调用 d3.append()