javascript - 根据 React 中的键更新状态

Question

我有状态结构，一开始是这样的:

messages:[
        {id: 1, name: 'name1'},
        {id: 2, name: 'name2'}, ...
    ]

我想要的是根据消息的 id 键更新一条消息。我正在从服务器获取另一个这样的对象:

{id: 2, name: 'newName2'}

状态是一个数组:(2) [{…}, {…}]。我不知道哪个索引将更新哪个元素，我只知道对象内部的 id 键。

如何根据键值更新状态中的对象？

Answer 1

您可以使用 findIndex获取您要更新的对象的索引，并将其替换为新数组中的新对象并将其设置为您的组件状态。

示例

class App extends React.Component {
  state = {
    messages: [{ id: 1, name: "name1" }, { id: 2, name: "name2" }]
  };

  updateMessage(newMessage) {
    this.setState(prevState => {
      const messages = [...prevState.messages];
      const index = messages.findIndex(m => m.id === newMessage.id);

      messages[index] = newMessage;

      return { messages };
    });
  }

  render() {
    return (
      <div>
        {this.state.messages.map(message => (
          <div key={message.id}>{message.name}</div>
        ))}
        <button onClick={() => this.updateMessage({ id: 2, name: "newName2" })}>
          Update message
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>