Javascript 反应开发工具显示数据状态，控制台显示空

我的React应用程序中的状态有一个奇怪的问题。在这里，我使用一个状态和一个useEffect。 状态用于存储从jsonplaceholder获取的帖子。获取并设置写入内部的状态 使用空数组作为依赖项选项的useffect

即使我从jsonplaceholder检索数据，它也没有设置usestate。它显示空数组 wich是初始值

有时，当我保存代码时，它会更新，但在我刷新页面后，它会消失并且不会更新 我又试了很多次

但问题是，react-dev工具显示的状态更新值是所有帖子的状态更新值。 但是“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>
    )
}

import React，{useffect，useState}来自“React”
导出默认函数测试（）{
const[posts，setposts]=useState（[]）；
useffect（（）=>{
取（'https://jsonplaceholder.typicode.com/posts',{
方法：'get'，
})。然后（结果=>{
返回result.json（）；
})。然后（（数据）=>{
控制台日志（数据）；
设置柱（数据）；
控制台日志（posts）；
})
},[])
返回(
)
}

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

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])

---

基本上，react不会立即改变状态，请参见

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

。。。
返回(
{JSON.stringify（posts）}
)

您的代码是正确的，但是状态没有立即放置，因此在您调用console log时，值还没有准备好，但是如果您在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>
      ))}    
    </>
  )
}

导出默认测试={
const[posts，setposts]=useState（[]）；
useffect（（）=>{
取（'https://jsonplaceholder.typicode.com/posts')
.then（result=>result.json（））
。然后（（数据）=>{
console.log（data）；//将被写入，因为您已经在约定的末尾
设置柱（数据）；
console.log（posts）；//将为空，因为状态为异步加载
});
},[])
返回(
{posts.map（post=>(

{post.title}

))}    
)
}

我猜这是错误的，因为您正在监视数据中的更改以进行api调用。。。在不传递要监视的数据的情况下使用useEffect将仅在安装组件时立即运行此操作

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>
      ))}    
    </>
  )
}