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: ''
}

我如何仅将“购物”待办事项上的完成值更改为true？

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

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>

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

2 个答案: