javascript - 在React的useEffect()中获取数据返回 "undefined"

Question

我正在尝试从数据库中获取数据。这是一个获取请求。只要我在异步函数中使用获取的数据，一切都可以正常工作。但除此之外，它只是返回“未定义”。 我究竟做错了什么？ 感谢您的帮助:)

const [accountInfos, setAccountInfos] = useState();
      const [error, setError] = useState();
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        (async function runEffect() {
            const fetchedAccountInfos =  await fetchAccountInfos();
            if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
                console.log(fetchedAccountInfos)  //This console.log works
                setAccountInfos(fetchedAccountInfos);
                setLoading(false);
                console.log(accountInfos)  //This console.log returns 
                                             "undefined"
              } else {
                setError("Accountdaten können nicht geladen werden!");
                setLoading(false);
                };
        })();
      }, []);
      console.log(accountInfos);  //This console.log returns "undefined"

Answer 1

它不是特定于 React 的:这是一个异步函数，因此 Promise 将在控制台日志发生后解析，这就是为什么你会得到 未定义。这只是正常的 JS 行为——在 console.log 执行时，值未定义。

在定义 JSX 的返回值中，如果 accountinfos 为 null，则呈现 null(或某些空状态组件)，否则根据 API 的返回值呈现实际组件。一旦收到响应，状态将更新并且组件将重新渲染