React useEffect 無限循環

Question

我對 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不會更新。

Answer 1

正如 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>
  );

Answer 2

你在回調函數中調用setPicList來監聽picList副作用：

useEffect(() => {
    setPicList(someValue); //infinite loop because this causes a side effect
}, [picList]);

您正在使用useEffect監聽對picList的更改， picList在useEffect回調函數中對picList進行更改時對picList進行更改。