我有我的結構如下狀態:在商店更新嵌套值
{ messages:
[
{ id: 1, comments: []}
]
}
而且我想在我的留言添加一個新評論,我有消息的ID,所以我可以很容易地創建新狀態,循環播放消息,並添加新評論,但似乎並不正確...
感謝您的幫助。
我有我的結構如下狀態:在商店更新嵌套值
{ messages:
[
{ id: 1, comments: []}
]
}
而且我想在我的留言添加一個新評論,我有消息的ID,所以我可以很容易地創建新狀態,循環播放消息,並添加新評論,但似乎並不正確...
感謝您的幫助。
試試這個:
var commentToAdd = { id: 1, comment: "text" };
this.setState({ messages: [...this.state.messages.map(i => i.id === commentToAdd.id ? { id: i.id, comments: [...i.comments, commentToAdd.comment] } : i) ] });
謝謝m1kael,這是最好的做法或有沒有更好的辦法 ? – GuillaumeC
不客氣@GuillaumeC。這是我能想到的最簡潔的選擇。它不會改變原始的'messages'數組。我把它稱爲最佳實踐方法。 – m1kael
最好的做法是保持狀態,在規範化的形狀,所以不是數組,你就必須通過ID索引的對象,而不是存儲在評論裏面的郵件,你只會存儲IDS。 對於您的例子狀態是這樣的:
{
messages: {
byId: {
'1': { id: '1', comments: ['comment1'] },
...
},
allIds: ['1', ...]
},
comments: {
byId: {
'comment1': { id: 'comment1', ... },
...
},
allIds: ['comment1', ...]
}
}
在這種結構中,以添加一個新評論,你將不得不更新comments
一部分,messages[id].comments
添加一個新的ID ...但它現在更容易更新單個評論。
爲了使對象正常化爲這種形式,我推薦使用normalizr。
約Redux的文檔中正常化狀態形狀的更多信息Normalizing State Shape
https://stackoverflow.com/questions/29537299/react-how-do-i-update-state-item1-on-setstate-with-jsfiddle – paqash
[React:如何更新setState上的state.item \ [1 \]? (與JSFiddle)](http://stackoverflow.com/questions/29537299/react-how-do-i-update-state-item1-on-setstate-with-jsfiddle) – paqash