在商店更新嵌套值

我有我的结构如下状态：在商店更新嵌套值

{ messages: 
    [ 
     { id: 1, comments: []} 
    ] 
}

而且我想在我的留言添加一个新评论，我有消息的ID，所以我可以很容易地创建新状态，循环播放消息，并添加新评论，但似乎并不正确...

感谢您的帮助。

来源

2017-02-26 GuillaumeC

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

试试这个：

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

来源

2017-02-26 23:49:10 m1kael

谢谢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

来源

2017-03-12 06:19:48

在商店更新嵌套值

回答

相关问题