簡體   English   中英

改變狀態而不改變反應中的舊狀態

[英]change state without mutating old state in react

我有這個默認狀態:

const [manager, setManager] = useState([{ name: undefined, project: [] }]);

我有來自 API 的數據,如下所示:

[{name : 'John doe'} , {'jane' : doe}]

我如何更新我的狀態,以便在將數據添加到狀態后最終看起來像這樣:

[{ name: 'john doe', project: [] } , { name: 'jane doe', project: [] }]; 

我試過這個:

setManager(prev => ([...prev , res.data]));

我假設你的意思是你想改變這個:

[{name : 'John doe'}, {name : 'Jane doe'}]

像這樣的事情

[{ name: 'john doe', project: [] } , { name: 'jane doe', project: [] }];

在此代碼段中,您將使用新數據傳播現有數據。

 setManager(prev => ([...prev, res.data]));

所以在manager ,你會得到 2 個數組,因為你沒有傳播第二個

[{ name: undefined, project: [] }, [{name : 'John doe'} , {name : 'Jane doe'}]]

在這種情況下,還要假設您的project鍵可能不為空,並且您希望將現有項目與每個 api 數據中的數據進行map

我會做這樣的事情

setManager(prevData => 
  resData.map(singleRes => {
    return {name: singleRes.name, project: prevData.project}
  })
)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM