React useEffect无限循环

问题描述 投票:1回答:2

我正在对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]不会得到更新。

javascript reactjs aws-amplify
2个回答
1
投票
useEffect(() => { ... }, []);

确保useEffect在首次呈现时仅运行一次


0
投票
[您正在侦听picListuseEffect的更改,然后在picList回调功能中对picList进行更改时对useEffect进行更改。
© www.soinside.com 2019 - 2024. All rights reserved.