javascript - ReactJS 更新状态数组中的单个对象

Question

我有一个名为 this.state.devices 的状态，它是一个 device 对象数组。

假设我有一个函数

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

这里的问题是每次调用 this.updateSomething 时，整个数组都会更新，因此整个 DOM 都会重新呈现。在我的情况下，这会导致浏览器卡住，因为我几乎每秒都在调用此函数，并且有许多 device 对象。然而，在每次调用中，实际上只有一两个这些设备得到更新。

我有哪些选择？

编辑

在我的确切情况下，device 是一个定义如下的对象:

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

因此 state.devices 数组中的每个项目都是此 Device 的特定时刻，即我拥有的某个地方:

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

我更新的答案如何进行 updateSomething，我有:

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

现在的问题是我得到一个错误，说无法读取 id 的未定义值，它来自 function Device()；似乎正在调用一个新的 new Device() 而 device 没有传递给它。

Answer 1

您可以使用 React immutability helpers .

来自文档:

简单推送

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

initialArray 仍然是 [1, 2, 3]。

因此对于您的示例，您需要执行以下操作:

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

根据您的设备模型的复杂程度，您可以就地“修改”对象属性:

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