簡化切換和的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更新項目的屬性

回答

相關問題