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 = {&nbsp; const [ posts, setposts] = useState([]);&nbsp; useEffect(()=>{&nbsp; &nbsp; &nbsp; fetch('https://jsonplaceholder.typicode.com/posts')&nbsp; &nbsp; &nbsp; .then(result => result.json())&nbsp; &nbsp; &nbsp; .then((data)=>{&nbsp; &nbsp; &nbsp; &nbsp; console.log(data); // Will be written because you are already at the end of the promisse&nbsp; &nbsp; &nbsp; &nbsp; setposts(data);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; console.log(posts); // Will be empty cuz the async load of state&nbsp; &nbsp; &nbsp; });&nbsp; },[])&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; {posts.map(post => (&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key="{post.id}">{post.title}</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </>&nbsp; )}

Answer 2

基本上，react 不会立即更改状态，如果您想看到状态确实发生了变化，请尝试渲染帖子，例如（我知道，这是一个糟糕的例子）：... return (         <div>{JSON.stringify(posts)}</div>     )

Answer 3

useState API 没有像 React 类中的 setState 那样的回调。为了等待状态更新完成，您所能做的就是使用 useEffect 挂钩，如下所示useEffect(()=>{&nbsp; &nbsp; &nbsp; &nbsp; fetch('https://jsonplaceholder.typicode.com/posts',{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method:'get',&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }).then(result=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return result.json();&nbsp; &nbsp; &nbsp; &nbsp; }).then((data)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setposts(data);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(posts);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; },[data])