即使后端返回了正确的数据，useEffect 代码仍显示错误信息 [重复]答案

【问题标题】：useEffect code is showing wrong info even when backend has returned correct data [duplicate]即使后端返回了正确的数据，useEffect 代码仍显示错误信息 [重复]
【发布时间】：2021-01-26 13:27:44
【问题描述】：

我正在学习 React，遇到了以下棘手的问题，下面的代码输出如下

IN 3

这里 0

根据我的理解setVideos 已经为Videos 数组设置了值，那么为什么返回的长度是0？

const [Videos, setVideos] = useState([])

useEffect(() => {
    axios.get('/api/video/getVideos')
        .then(response => {
            if (response.data.success) {
                console.log("IN  " + response.data.videos.length)
                setVideos(response.data.videos)
                console.log("HERE " + Videos.length);
            } else {
                console.log("OUT");
                alert('Failed to get Videos')
            }
        })
}, [])

【问题讨论】：

状态变化在 React 中是异步的。你不能在下一行console.log他们。在useEffect之外打印出来
阅读一下 - 希望它可以解决您可能想知道的一些问题 - reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

标签： reactjs react-hooks

【解决方案1】：

在 React 中，状态更改是异步，并且不能在设置后立即记录。我做了这个例子是为了让你更清楚。

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [videos, setVideos] = useState([]);
  
  useEffect(() => {
    setVideos(["A", "B", "C", "D"]);
    console.log("Videos1:", videos); //----> empty
  }, [])

  useEffect(() => {
    console.log("Videos:", videos); //---> REAL values
  }, [videos])

  const displayVideos = videos.map((elem, index) => 
    <div key={index}>
      <h1>{elem}</h1>
    </div>
  )

  return (
    <div>
    {displayVideos}
    </div>
  );
}

DEMO

【讨论】：

【解决方案2】：

一般的问题是我们想要等待状态更新，然后再做一些事情。不幸的是，我们不能编写顺序代码，因为每个状态更新都是异步的。使用自定义钩子 - 即 useStateWithPromise - 这个问题可以解决。

【讨论】：

这里不需要自定义钩子