更新商店中的嵌套值

Question

我的状态结构如下：

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

而且我想在我的消息中添加一条新评论，我有消息 ID，因此我可以轻松地创建一个新状态、循环消息并添加新评论，但它似乎没有做正确的事...

感谢您的帮助。

Answer 1

试试这个：

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

Answer 2

最佳做法是将状态保持在规范化的形状中，因此您可以使用 id 索引对象而不是数组，而不是将评论存储在消息中，您将只存储 id。对于您的示例，状态将如下所示：

{
  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

更新商店中的嵌套值

Update a nested value in a store

reactjs

react-redux