ReactJS'de bir dizideki bir nesneyi güncellemenin en iyi yolu nedir?

Question

Durumunuzun bir parçası olarak bir diziniz varsa ve bu dizi nesneler içeriyorsa, durumu bu nesnelerden biriyle değiştirmenin kolay bir yolu nedir? reaksiyona öğretici modifiye

Örnek:

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

önemli bölümü, bu değişmez gibi tedavi etmek için olan durum güncellenirken. Eğer garanti ederseniz, herhangi bir çözüm işe yarayacaktı. İşte

benim çözüm immutability-helper kullanıyor:

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

devlet diziler hakkında sorular sonrasında da yardımcı olabilir:

• Correct modification of state arrays in ReactJS
• what is the preferred way to mutate a React state?
Eğer dizinin çalışırken

Answer 2

Eğer bu aynıdır
, data- Eğer özel geçerken aynı zamanda bir html 5 konvansiyonudur öznitelik bir öneki, benim örnekte ben
data-index niteliğini geçirerek, özel geçmesine bağlıyor gerekir numaralı telefondan array güncellememiz gibi.

Ör:

//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

Oldukça Object.assign yerine değişmezlik yardımcıları ile bu yapıyor gibi.

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

Sadece bu çok daha özlü ek yeri daha ve bir dizin bilerek veya açıkça bulunmayan dava dosyasını gerektirmez düşünüyorum.

Answer 4

Nasıl yapılacağını daha iyi açıklamaya/açıklamaya çalışıyorum VE Neler olup bittiğini.

• İlk olarak, durum dizisinde değiştirmekte olduğunuz öğenin dizinini bulun.
• İkincisi,
• Üçüncü O dizinde update eleman, yeni koleksiyon sen ne yapmaya çalışıyorsun anlatabilir misin

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