简化切换和的setState更新项目的属性

  • Z时代
  • 2024-01-10
  • 分类：问答

绷项目并更改属性的值是很常见的，但我还是写这种代码简化切换和的setState更新项目的属性

handleToggle = (id) => { 
     const updatedTodos = this.state.todos.map(todo => { 
      if(todo.id === id){ 
       todo.completed = !todo.completed 
      } 
      return todo 
     }) 
     this.setState({ 
      todos: updatedTodos 
     }) 
    }

没有错，但我发现这就是我写的部分很多代码。与push不同，我可以使用spread操作符，或者删除，我可以简单地使用一个班轮过滤器方法。任何想法如何缩短上面的代码？

回答：

您可以使用Object.assign缩短了一句：

handleToggle = (id) => { 
    const updatedTodos = this.state.todos.map(todo => 
     Object.assign({}, todo, (todo.id === id) ? { completed: !todo.completed } : {})) 
    this.setState({ 
     todos: updatedTodos 
    }) 
}

编辑：使用短路评价，而不是三元运算符，可以缩短一点点：

handleToggle = (id) => { 
    const updatedTodos = this.state.todos.map(todo => 
     Object.assign({}, todo, todo.id === id && { completed: !todo.completed })) 
    this.setState({ 
     todos: updatedTodos 
    }) 
}

回答：

不最短但更易读：

import update from 'immutability-helper'; 
handleToggle = (index) => { 
    var oldTodos = this.state.todos 
    var todo = oldTodos[index] 
    var todos = update(oldTodos, { 
     [index]: { 
      completed: { 
       $set: !todo.completed 
      } 
     } 
    }) 
    this.setState({ todos }) 
}

我通过了项目的index作为参数，而不是id。

回答：

从我认为，你只是想拨动根据id状态阵列中的一个值，

您可以使用findIndex ES6函数来获得指标，然后切换就像

handleToggle = (id) => { 
    var todos = [...this.state.todos]; 
    var idx = todos.findIndex(obj => obj.id === id); 
    todos[idx].completed = !todos[idx].completed; 
    this.setState({ 
     todos 
    }) 
}
其价值

以上是 简化切换和的setState更新项目的属性 的全部内容， 来源链接： utcz.com/qa/265469.html

回到顶部