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

Posted 2023-02-22

【中文标题】更新状态数组内某些对象的属性

【英文标题】：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？

【参考方案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>