3 回答

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
您的代碼是正確的,但狀態(tài)并未立即放置,因此當(dāng)您調(diào)用控制臺(tái)日志時(shí),該值尚未準(zhǔn)備好,但如果您在 html 中顯示該數(shù)據(jù),則這不會(huì)成為問(wèn)題
對(duì)您的代碼進(jìn)行了一些更改和少量組織
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>
))}
</>
)
}

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超3個(gè)贊
基本上,react 不會(huì)立即更改狀態(tài),
如果您想看到狀態(tài)確實(shí)發(fā)生了變化,請(qǐng)嘗試渲染帖子,例如(我知道,這是一個(gè)糟糕的例子):
... return?( ????????<div>{JSON.stringify(posts)}</div> ????)

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
useState API 沒(méi)有像 React 類(lèi)中的 setState 那樣的回調(diào)。為了等待狀態(tài)更新完成,您所能做的就是使用 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])
添加回答
舉報(bào)