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

绷项目并更改属性的值是很常见的，但我还是写这种代码简化切换和的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操作符，或者删除，我可以简单地使用一个班轮过滤器方法。任何想法如何缩短上面的代码？

来源

2017-07-16 Madeline Ries

您可以使用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 
    }) 
}

来源

2017-07-16 08:18:38

是第一个参数，{}}强制？ –

它可以是'Object.assign（{}，todo，todo.id === id && {completed：！todo.completed}）''？ –

第一个参数用于目标对象（请点击https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign），它确实是一个必需的参数。如果我们将todo作为第一个参数传递，它将被改变，在“避免突变”等方面可能不需要。 –

不最短但更易读：

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。

来源

2017-07-16 09:57:06 Ozgur

从我认为，你只是想拨动根据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 
    }) 
}

其价值

来源

2017-07-16 10:04:49

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

回答

相关问题