Was ist der beste Weg, um ein Objekt in einem Array in ReactJS zu aktualisieren?

Question

Wenn Sie ein Array als Teil Ihres Status haben und dieses Array Objekte enthält, was ist eine einfache Möglichkeit, den Status mit einer Änderung an einem dieser Objekte zu aktualisieren?

Beispiel von der tutorial on reagieren geändert:

var CommentBox = React.createClass({ 
    getInitialState: function() { 
    return {data: [ 
     { id: 1, author: "john", text: "foo" }, 
     { id: 2, author: "bob", text: "bar" } 
    ]}; 
    }, 
    handleCommentEdit: function(id, text) { 
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first(); 
    var updatedComments = ??; // not sure how to do this 

    this.setState({data: updatedComments}); 
    } 
} 

Answer 1

Während Zustand des Schlüsselteil es zu behandeln ist, als ob es die Aktualisierung unveränderlich ist. Jede Lösung würde gut funktionieren, wenn Sie es garantieren können.

Hier ist meine Lösung mit immutability-helper:

jsFiddle: http://jsfiddle.net/eLmwf14a/

var update = require('immutability-helper'); 

    handleCommentEdit: function(id, text) { 
    var data = this.state.data; 
    var commentIndex = data.findIndex(function(c) { 
     return c.id == id; 
    }); 

    var updatedComment = update(data[commentIndex], {text: {$set: text}}); 

    var newData = update(data, { 
     $splice: [[commentIndex, 1, updatedComment]] 
    }); 
    this.setState({data: newData}); 
    }, 

Nach Fragen zu Zustand Arrays auch helfen können:

• Correct modification of state arrays in ReactJS
• what is the preferred way to mutate a React state?

Answer 2

Wenn Sie mit Array arbeiten müssen Sie Gewohnheit führen Attribut, die ich in meinem Beispiel
data-index Attribut bin vorbei, data- ein Präfix ist, wenn Sie benutzerdefinierte passieren Attribut es ist auch eine HTML-5-Konvention,
Dies ist die gleiche So aktualisieren wir array in Reducer.

Ex:

//handleChange method 
 
handleChange(e){ 
 

 
    //getting custom attribute value. 
 
    let i = e.target.getAttribute('data-index'), 
 
     obj = Object.assign({}, this.state.arr[i],{[e.target.name]: e.target.value}); 
 
     
 
    //update state value. 
 
    this.setState({arr: [...this.state.arr.slice(0, i), obj, ...this.state.arr.slice(i + 1)]}) 
 
    }

Answer 3

ich ganz wie dies mit Object.assign tun, anstatt die Unveränderlichkeit Helfer.

handleCommentEdit: function(id, text) { 
    this.setState({data: this.state.data.map(
     (el)=> el.id === id ? Object.assign({}, el, {text: text}) : el 
    }); 
} 

Ich denke nur, dies als Spleiß viel prägnanter und erfordert keinen Index zu wissen, oder explizit Umgang mit dem nicht gefunden Fall.

Answer 4

Versuchen, aufzuräumen/besser zu erklären, wie man das macht und was vor sich geht.

• Suchen Sie zuerst den Index des Elements, das Sie ersetzen, im Statusarray.
• Zweitens update das Element an diesem Index
• Drittens rufen setState mit der neuen Kollektion

import update from 'immutability-helper'; 

// this.state = { employees: [{id: 1, name: 'Obama'}, {id: 2, name: 'Trump'}] } 

updateEmployee(employee) { 
    const index = this.state.employees.findIndex((emp) => emp.id === employee.id); 
    const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]}); // array.splice(start, deleteCount, item1) 
    this.setState({employees: updatedEmployees}); 
}