在 useEffect 中使用异步函数 - React.js

Question

我在使用 React 中的状态变量渲染返回的数据时遇到问题。

查看类似问题后，我现在可以在 useEffect 内部调用自定义异步函数。第一次加载页面时，“mydata is”日志条目显示一个空白数组，这是因为我的异步函数调用的承诺尚未得到解决。但是，我无法弄清楚如何停止收到错误 TypeError: undefined is not an object (evaluating 'data[0][0]')。

如果我重新加载页面，然后注释掉最后两行，保存，然后取消注释这两行，我的页面就会正确呈现（因为数据被缓存了？）。但我不知道如何让它等待第一次渲染，直到数据变量被填充。我尝试用 {data? 填充 div 元素data[0][0].stat.avg : ""} 并得到相同的错误。

import React, { useState, useEffect } from "react";
import "./App.css";
import customAsyncFunction from "./Functions";

function App() {
  const [data, setData] = useState([]);

  const fetchInfo = () => {
    return customAsyncFunction().then((d) => {
      setData(d);
      console.log(d);
    });
  };

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

  console.log("mydata is", data);
  return <div>{data? data[0][0].stat.avg : ""}</div>;
}

Answer 1

但我不知道如何让它等待第一次渲染，直到数据变量被填充。

因为这是错误的方法。只要状态具有该值，组件的呈现逻辑就需要能够处理该状态。您的状态有两个潜在值，初始默认值和异步操作后的更新值。并且渲染失败并使用初始默认值。

这只会检查

data

是否为 truthy:

data ? data[0][0].stat.avg : ""

当它是空数组时是这样的：

const [data, setData] = useState([]);

但是，空数组没有任何元素，并且您试图取消引用其中的元素。

您还可以检查它是否有元素：

(data && data.length > 0) ? data[0][0].stat.avg : ""

或者使用可选链：

data ? data?.[0]?.[0]?.stat?.avg : ""

或者将其初始化为不真实的值，例如

undefined

:

const [data, setData] = useState();