我正在对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)。
我正在关注this guide
编辑:为了完整性,如果删除依赖项,即如果让picList
代替[]
,则[picList]
不会得到更新。
useEffect(() => {
...
}, []);
确保useEffect在首次呈现时仅运行一次
picList
对useEffect
的更改,然后在picList
回调功能中对picList
进行更改时对useEffect
进行更改。