ReactJS durum dizisi içindeki tek bir nesneyi güncelleştirme

Question

device nesnelerinin bulunduğu this.state.devices adı verilen bir durum var.

Burada

updateSomething: function (device) { 
    var devices = this.state.devices; 
    var index = devices.map(function(d){ 
     return d.id; 
    }).indexOf(device.id); 

    if (index !== -1) { 
     // do some stuff with device 
     devices[index] = device; 
     this.setState({devices:devices}); 
    } 
} 

Sorun her zaman this.updateSomething, denir tüm dizi güncellenir ve böylece tüm DOM re-render olur olduğunu bir işlevi olduğunu varsayalım. Benim durumumda, bu, her saniye hemen hemen her saniye bu işlevi çağıran tarayıcının donmasına neden oluyor ve birçok device nesnesi var. Ancak, her çağrıda, bu cihazların yalnızca bir veya iki tanesi güncel olarak güncellenir.

Seçeneklerim nelerdir? ,

function Device(device) { 
    this.id = device.id; 
    // And other properties included 
} 

Yani state.devices dizisindeki her öğe bu Device belirli bir anlık geçerli:

DÜZENLEME benim kesin durumda

, bir device şöyle tanımlanır bir nesnedir yani bir yere sahip olabilirim:

addDevice: function (device) { 
    var newDevice = new Device(device); 
    this.setState({devices: this.state.devices.push(device)}); 
} 

Benim updat

updateSomething: function (device) { 
    var devices = this.state.devices; 
    var index = devices.map(function(d){ 
     return d.id; 
    }).indexOf(device.id); 

    if (index !== -1) { 
     // do some stuff with device 
     var updatedDevices = update(devices[index], {someField: {$set: device.someField}}); 
     this.setState(updatedDevices); 
    } 
} 

Sorun şimdi id ait tanımsız değeri okuyamaz şeklinde bir hata almak olduğunu ve function Device() geliyor;: ed nasıl updateSomething üzerine cevap, var Yeni bir new Device() çağrılıyor ve device iletilir.

Answer 1

Sen immutability helpers tepki kullanabilirsiniz. Dokümanlar

:

basit itme

var initialArray = [1, 2, 3]; 
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] 

initialArray hala [1, 2, 3].

if (index !== -1) { 
    this.setState(update(this.state.devices[index], {name: {$set: 'a new device name' }})); 
} 

: En device modeli sadece yerinde nesne özelliklerini 'modifiye' olabilir ne kadar karmaşık bağlı

if (index !== -1) { 
    var deviceWithMods = {}; // do your stuff here 
    this.setState(update(this.state.devices, {index: {$set: deviceWithMods }})); 
} 

:

Yani örneğin böyle bir şey yapmak isteyeceksiniz

Answer 2

Tepki durumu ile ilgili görüşüme göre, yalnızca "durum" ile ilgili olan şeyleri saklayın, işler açılır, ancak elbette istisnalar vardır. Yerinde olsaydım

Ben bir değişken olarak cihazların dizi çekmeye ve orada yoluna koymak, bu yüzden ne yapabilir var olacaktır:

var devices = []; 

var MyComponent = React.createClass({ 
    ... 
    updateSomething: function (device) { 

     var index = devices.map(function(d){ 
      return d.id; 
     }).indexOf(device.id); 

     if (index !== -1) { 
      // do some stuff with device 
      devices[index] = device; 

      if(NeedtoRender) { 
       this.setState({devices:devices}); 
      } 
     } 
    } 
}); 

Answer 3

Yukarıdaki nedenlerden dolayı cevaplar benim için çalışmadı.

if (index !== -1) { 
      let devices = this.state.devices 
      let updatedDevice = {//some device} 
      let updatedDevices = update(devices, {[index]: {$set: updatedDevice}}) 
      this.setState({devices: updatedDevices}) 
    } 

Ve notuna dayalı immutability-helper itibaren update ithal: Birçok denemeden sonra aşağıda yaptığımız gibi shouldComponentUpdate olarak her zaman render önlemek Bu yazı https kontrol etmek yolu vardır https://reactjs.org/docs/update.html