在异步函数中正确使用 useEffect 和 useState 调用

Question

致敬！

我正在尝试（并成功地）在异步函数内复制数组。我正在使用这个数组来设置在 React 组件的顶层声明的数组的状态，如下所示：

  const [retrievedData, setRetrievedData] = useState([]);

  useEffect(() => {
    setRetrievedData;
  }, [retrievedData]);

  async function fetchInfo() {
    const promiseData = await Promise.all(<My fetch links array>)
    );

    const dataInJson = await promiseData.map((resp) => resp.json());

    let actualData = [];

    for (let i = 0; i < dataInJson.length; i++) {
      const foo = await Promise.resolve(dataInJson[i]);
      actualData.push(foo);
    }

    setRetrievedData(actualData);
  }

  fetchInfo();

此代码的问题在于它创建了一个无限循环的 setStates，即使我将 useEffect 第二个参数设置为空数组也是如此。我也尝试在调用 fetchInfo 函数时使用 async/await 但那只是 returns 当然是另一个 Promise。在处理此问题时，我还注意到 Promise.all 调用运行了两次。

非常感谢花时间阅读这个问题。

Answer 1

做这样的事情：

const [retrievedData, setRetrievedData] = useState({ data: [] });

const fetchInfo = useCallback(async () => {
  // do your stuff here...

  setRetrievedData({ data });
}, []);

useEffect(() => {
  fetchInfo();
}, [fetchInfo]);

如果您打算追加数据到retrievedData，那么您可以这样调用setRetrievedData：

setRetrievedData(prevState => ({
  data: [...prevState.data, newData]
}));

如果您仅在组件加载期间使用 fetchInfo，您可以将其定义（没有 useCallback）移动到您的 useEffect 并将一个空的依赖项数组传递给它，而不是.

所示

Answer 2

这是 react 中的常见模式

const Component = () => {
    const [data, setData] = useState();
    useEffect(()=>{
        const fetchData = async () => {
            const data = await fetch();
            setData(data);
        }
        fetchData();
    }, [])
    return <div>{JSON.stringify(data)}</div>
}

在异步函数中正确使用 useEffect 和 useState 调用

Proper use of useEffect with useState called within async function

reactjs

next.js

use-effect

use-state