React JS: bir öğenin nesneler olduğu yer olan this.state.data öğesinden doğru şekilde nasıl kaldırılır

Question

Üzerinden alınan bir veri dizisini temel alan bir veri satırı (<tr> vb.) Oluşturan bir bileşenim var. Bir AJAX çağrısı. Her şey verileri düzenlemek ve eklemek için iyi çalışır, ancak dizinin farklı bir kopyasının (içerilen nesnelerin ayrı kopyaları ile - ref ile değil, val ile) nasıl belirlendiğini belirleyemiyorum. Veriler, uygulanabilir satır tablodan kaldırılır.

Halihazırda bulunan nesneler ref tarafından yapıldığı için, dizinin bir kopyasını oluşturduğumda bile, tablomun son satırı kaldırılmıştır (satır dizini ve verileri AJAX çağrısında doğru şekilde başvurulan ve silinmiş olsa bile) . Ben tetiklenmez kılmasıdır yüzden uygun bir diff yapamaz tepki anlıyorum, bu yüzden bu nasıl işleneceğini gösterir misin

handleRowDelete: function(rowIdx) { 
    // Correct row 
    var row = this.state.data[rowIdx]; 

    // This makes a new array, but the contained objects are still by ref 
    var rows = this.state.data.slice(); 

    // This contains the proper row that will be deleted. If this array is set to data, the table is updated to reflect just the one row - as expected. 
    var throwout = rows.splice(rowIdx, 1); 
    console.log(throwout); 

    // Whether I set via the React.addons: 
    var newState = React.addons.update(this.state, { 
     data: { $set: rows } 
    }); 
    this.setState(newState); 

    // Or just set the state again via this.setState(...) 
    //this.setState({data: rows, add: false}); 

    // It always just removes the last row in the component render 
    // Even though the proper row gets deleted following in AJAX call 
    $.ajax({ 
    ... 
}, 
...  

?

UPDATE. İlgili döngü:

var Grid = React.createClass({ 
    propTypes: { 
     data: React.PropTypes.array.isRequired, 
     onCellChange: React.PropTypes.func.isRequired, 
     onRowCommit: React.PropTypes.func.isRequired 
    }, 
    render: function() { 
     var rows = this.props.data.map(function(rowData, index) { 
      return <Row key={index} data={rowData} onCellChange={this.props.onCellChange.bind(null, index)} onRowCommit={this.props.onRowCommit.bind(null, index)} onRowDelete={this.props.onRowDelete.bind(null, index)} />; 
     }, this); 

     return (
      <Table striped bordered hover responsive> 
       <thead> 
       <tr> 
       <th className="col-sm-4">Order Subtotal (up to)</th> 
       <th className="col-sm-2">Canada</th> 
       <th className="col-sm-2">US</th> 
       <th className="col-sm-2">International</th> 
       <th className="col-sm-1"></th> 
       </tr> 
       </thead> 
       <tbody> 
        {rows} 
       </tbody> 
      </Table> 
     ); 
    } 
}); 

Answer 1

Sen key değer nesne örneğinin ömrü boyunca sabit kalmasını sağlamak gerekir. Kodunuzda olduğu gibi, key değeri index değerini Array'a dayandırmaktadır. Bir öğeyi Array'dan kaldırırsanız, dizinler güncelleştirilir ve bu nedenle de anahtarlar olur. Ve sonuç olarak, bir nesnenin key değişecek ve React, yeni dizi değişikliklerini (alttaki dizi değiştiğinde bile) düzgün şekilde uygulanmadığı görünecektir.

Her nesne örneğinden key olarak benzersiz bir değer kullanmanız veya yapay olarak bir tane oluşturmanız gerekir (her nesneye benzersiz bir numara atamanız yeterlidir).

Answer 2

Benzersiz anahtarı kullan aşağıdaki gibi Veri Nesneleri'dur.

data = [ 
    { 
    id: 0, 
    contents: 'data 0', 
    }, 
    { 
    id: 3, 
    contents: 'data 3', 
    }, 
    { 
    id: 4, 
    contents: 'data 4', 
    }, 
]; 


var rows = this.props.data.map(function(rowData, index) { 
      return <Row key={rowData.id} data={rowData} onRowDelete={this.props.onRowDelete.bind(null, index)} />; 
      }, this); 

Yeniden işleme sokmayın, bileşen, daha önce olduğu gibi aynı tuşa sahip.