Vereinfachen Knebel und setState aktualisierten Artikel Eigentum

Question

Makel Artikel und der Wert der Eigenschaft zu ändern sind sehr häufig, aber ich schreibe immer noch diese Art von Code

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

      return todo 
     }) 

     this.setState({ 
      todos: updatedTodos 
     }) 
    } 

nichts falsch mit ihm, aber ich fand dies der Teil ist, wo ich schreiben viel Code. Im Gegensatz zu Push kann ich Spread-Operator verwenden, oder entfernen kann ich einfach eine Liner-Filter-Methode verwenden. Irgendeine Idee, wie kann ich den obigen Code verkürzen?

Answer 1

Sie Object.assign verwenden können, um etwas zu verkürzen:

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

    this.setState({ 
     todos: updatedTodos 
    }) 
} 

EDIT: Kurzauswertung statt ternären Operator verwenden, können Sie es ein bisschen mehr verkürzen:

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

    this.setState({ 
     todos: updatedTodos 
    }) 
} 

Answer 2

Nicht der kürzeste, aber besser lesbare:

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

Ich habe die index des Artikels als Parameter, nicht id übergeben.

Answer 3

Von dem, was ich nehme an, die Sie gerade in der Zustandsmatrix Toggle einen Wert wollen auf der ID basiert,

Sie können von findIndex ES6 Funktion machen den Index zu bekommen und dann umschalten seinen Wert wie

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

    this.setState({ 
     todos 
    }) 
}