React 开发工具显示数据状态，控制台显示为空

Question

我的 React 应用程序中的状态遇到了一个奇怪的问题。在此我使用一种状态和一种 useEffect。状态用于存储从 jsonplaceholder 获取的帖子。获取并设置写入 useffect 内的状态，并使用空数组作为依赖选项。我什至从 jsonplaceholder 检索数据，它没有设置 usestate。它显示空数组，这是初始值。有时，当我保存代码时它会更新，但在刷新页面后它会消失并且不会再次更新我什至尝试了很多次但问题是react-dev-tools显示状态更新值，这是所有帖子。但“console.log()”不显示数据。告诉为什么 setposts() 方法似乎没有设置状态，import React,{ useEffect,useState} from 'react'export default function Test() {    const [ posts, setposts] = useState([]);    useEffect(()=>{        fetch('https://jsonplaceholder.typicode.com/posts',{            method:'get',            }).then(result=>{            return result.json();        }).then((data)=>{            console.log(data);            setposts(data);                    console.log(posts);        })    },[])    return (        <div>                       </div>    )}

Answer 1

您的代码是正确的，但状态并未立即放置，因此当您调用控制台日志时，该值尚未准备好，但如果您在 html 中显示该数据，则这不会成为问题

对您的代码进行了一些更改和少量组织

export default Test = {

  const [ posts, setposts] = useState([]);

  useEffect(()=>{

      fetch('https://jsonplaceholder.typicode.com/posts')

      .then(result => result.json())

      .then((data)=>{

        console.log(data); // Will be written because you are already at the end of the promisse

        setposts(data);      

        console.log(posts); // Will be empty cuz the async load of state

      });

  },[])

  return (

    <>          

      {posts.map(post => (

        <ul>

          <li key="{post.id}">{post.title}</li>

        </ul>

      ))}    

    </>

  )

}

Answer 2

基本上，react 不会立即更改状态，

如果您想看到状态确实发生了变化，请尝试渲染帖子，例如（我知道，这是一个糟糕的例子）：

...
return (
        <div>{JSON.stringify(posts)}</div>
    )

Answer 3

useState API 没有像 React 类中的 setState 那样的回调。为了等待状态更新完成，您所能做的就是使用 useEffect 挂钩，如下所示

useEffect(()=>{

        fetch('https://jsonplaceholder.typicode.com/posts',{

            method:'get',

    

        }).then(result=>{

            return result.json();

        }).then((data)=>{

            console.log(data);

            setposts(data);

        

            console.log(posts);

        })

    },[data])