[英]React useEffect infinite loop
我对 React 进行了一些试验,并想检索我在 S3 存储桶上的 json 文件。 我正在使用下一个代码
import React, { useState, useEffect } from "react";
import { Storage } from "aws-amplify";
export default function Gallery(props){
const [picList, setPicList] = useState([]);
useEffect(() => {
async function onLoad() {
try{
const picUrl = await Storage.get('list.json');
const picr = await fetch(picUrl);
const picjs = await picr.json();
setPicList(picjs);
console.log(picList);
}
catch(e){
alert(e);
}
};
onLoad();
}, [picList]);
function renderLander() {
return (
<div className="lander">
<h1>Lander</h1>
</div>
);
}
return(
<div className="Gallery">
{renderLander()}
</div>
);
}
一开始我收到错误,即在使用setPicList
, picList
不采用 json 文件的值。 我正在使用console.log()
进行调试,因此我确定Storage.get
正在获取正确的 url, fetch()
正在获取文件 json,但picList
打印默认值[]
。
现在,使用上面的代码,我得到了一个无限循环,但这次picList
的值得到了正确的值(但它不断为我认为的每个渲染获取 S3)。
我正在遵循本指南
编辑:为了完整picList
如果我删除依赖项,即如果我让[]
而不是[picList]
,则picList
不会更新。
正如 Brian 之前提到的,您的 useEffect 设置为在 picList 更改时触发。 由于 picList 在 useEffect 中被改变,这就造成了一个无限循环。
由于您正在从 S3 检索对象,因此您需要做的就是检索它一次。
useEffect(() => {
...
}, []);
确保 useEffect 在第一次渲染时只运行一次
React hooks 异步更改状态,因此之后的 console.logging 将生成 None 或先前的值。
您需要做的是在渲染函数中添加条件语句,以便在状态更新时重新渲染组件。
function renderLander() {
return (
<div className="lander">
<h1>Lander</h1>
</div>
);
}
return(
<div className="Gallery">
{picList ? renderLander() : null}
</div>
);
你在回调函数中调用setPicList
来监听picList
副作用:
useEffect(() => {
setPicList(someValue); //infinite loop because this causes a side effect
}, [picList]);
您正在使用useEffect
监听对picList
的更改, picList
在useEffect
回调函数中对picList
进行更改时对picList
进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.