在状态下更新数组中某些对象的属性

Question

我正在尝试更新我的代码：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: ''
}

我怎么才能把“去购物”上做的事情的价值改变成真呢？

Answer 1

使用array.map只在与单击的id匹配的元素上切换done标志，如下所示。todo的其他属性通过对象扩展复制：

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

Answer 2

您可以使用给定的id和findIndex找到对象的索引，并创建一个新的数组，其中包含该对象的副本，并对其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>

​