更新状态数组内某些对象的属性答案

【问题标题】：Update property of certain object inside array in state更新状态数组内某些对象的属性
【发布时间】：2019-04-28 12:31:32
【问题描述】：

我正在尝试更新我的代码：https://repl.it/@colegonzales1/HeftyJoyfulAbilities

我正在尝试使我的 handleToggle 功能正常工作。为了修修补补，它现在是空白的，但我在过去的 2-3 个小时里试图让它发挥我自己的知识，但我不知道如何访问状态中的特定项目。我知道如何覆盖这一切，但这不是我想做的。说我有：

this.state = {
  todos: [
    {
      title: 'Wash car',
      id: 1,
      done: false
    },
    {
      title: 'Go shopping',
      id: 2,
      done: false
    }
  ],
  inputValue: ''
}

我如何才能只将“去购物”待办事项上的 done 值更改为 true？

【问题讨论】：

标签： arrays reactjs object nested state

【解决方案1】：

使用 array.map 仅在与单击的 id 匹配的元素上切换完成标志，如下所示。待办事项的其他属性通过对象扩展复制：

handleToggle (e) {
  const id = parseInt(e.target.id,10)
  this.setState((prevState) => ({
    todos: prevState.todos.map(t => t.id === id ? {...t, done: !t.done} : t)
  })) 
}

【讨论】：

你为什么使用 todos: prevState？为什么不直接说 todos: this.state.todos.map？
@ColeGonzales prevState 是在状态更改之前访问当前状态的新推荐方式。 teamtreehouse.com/community/…

【解决方案2】：

您可以通过findIndex 找到具有给定id 的对象的索引，并创建一个新数组，其中包含该对象的副本，并切换其done 标志。

示例

class App extends React.Component {
  state = {
    todos: [
      {
        title: "Wash car",
        id: 1,
        done: false
      },
      {
        title: "Go shopping",
        id: 2,
        done: false
      }
    ],
    inputValue: ""
  };

  handleToggle = id => {
    this.setState(prevState => {
      const todos = [...prevState.todos];
      const todoIndex = todos.findIndex(todo => todo.id === id);

      todos[todoIndex] = { ...todos[todoIndex], done: !todos[todoIndex].done };

      return { todos };
    });
  };

  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state)}</div>
        <button onClick={() => this.handleToggle(2)}>
          Toggle todo with id 2
        </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>

【讨论】：