Question

我是React的初学者，我想将一个对象添加到数组中。

这是我的代码：

const initialState =
{
  messages: [],
};



export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_MESSAGE':
      return {
    messages: update(state.messages, {$push: [{text: action.text}]})
  };

  default:
  return state
  }
}

在我的组件中：

<ul>{this.props.chat.messages.map((message) =>{ return <li>{message.text}</Link></li> })

}

我收到错误：

Encountered two children with the same key, [object Object] . Child keys must be unique; when two children share a key, only the first child will be used.

感谢您的帮助。

Answer 1

您必须为每个列表项提供unique keys。您的邮件没有密钥/ ID，您需要提供唯一生成的ID或作为最后的手段，使用索引（应尽可能避免使用）。上面的代码可以重构为：

{ this.props.chat.messages.map((message, index) => (<li key={index}>{message.text}</li>) }

Answer 2

按照定义，数组是不可变的数据。

按照最佳做法，最好使用$ splice方法。

React：将对象添加到数组中

2 个答案: