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

Question

我在学习反应时遇到了下面的棘手问题，下面的代码输出如下

在3中

此处为%0

根据我的理解，setvideo已经为video数组设置了值，那么为什么返回的长度是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')
            }
        })
}, [])

Answer 1

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

Answer 2

在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>
  );
}

演示