亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 開發工具顯示數據狀態,控制臺顯示為空

React 開發工具顯示數據狀態,控制臺顯示為空

qq_花開花謝_0 2023-07-14 15:14:53
我的 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>    )}
查看完整描述

3 回答

?
MM們

TA貢獻1886條經驗 獲得超2個贊

您的代碼是正確的,但狀態并未立即放置,因此當您調用控制臺日志時,該值尚未準備好,但如果您在 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>

      ))}    

    </>

  )

}


查看完整回答
反對 回復 2023-07-14
?
呼如林

TA貢獻1798條經驗 獲得超3個贊

基本上,react 不會立即更改狀態,

如果您想看到狀態確實發生了變化,請嘗試渲染帖子,例如(我知道,這是一個糟糕的例子):

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


查看完整回答
反對 回復 2023-07-14
?
FFIVE

TA貢獻1797條經驗 獲得超6個贊

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


查看完整回答
反對 回復 2023-07-14
  • 3 回答
  • 0 關注
  • 249 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號