在 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()