const [list, setList] = useState([]);
useEffect(() => {
const getData = async () => {
let storeList = [];
for (let i = 0; i<50; i++) {
try {
const token = await contract.methods.tokenOfOwnerByIndex(accountId , i).call();
let data = await contract.methods.tokenURI(token).call();
const receivedData = await fetch(data);
let jsonData = await receivedData.json();
storeList.push(jsonData);
setList(storeList);
} catch(error) {
cogoToast.error(`Error caused in fetching data of ${i} number token`);
}
}
};
if (contract) getData();
}, [contract]);
“list”的初始状态为空。当循环第一次运行并且列表第一次更新时,组件会重新渲染,但在那之后,即使状态正在改变,组件也不会重新渲染。
理想情况下,组件应在状态更改时重新渲染。
您正在改变已经存在的数组,而不是创建一个新数组。当您在功能组件中设置状态时,react 会===
在旧状态和新状态之间进行。如果它们相同,则跳过渲染。
要解决此问题,请创建一个新数组并使用它设置状态:
let jsonData = await receivedData.json();
setList(prev => [...prev, jsonData]);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句