当前位置: 首页 > 面试题库 >

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

訾稳
2023-03-14
问题内容

我有一个称为状态this.state.devicesdevice对象数组。

说我有功能

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对象。但是,在每次通话中,实际上仅更新其中一个或两个设备。

我有什么选择?

编辑

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

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

因此,数组中的每个项目state.devices都是this的特定瞬间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没有将其传递给它。


问题答案:

您可以使用react 不变性助手。

从文档:

简单推

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

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

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


 类似资料:
  • 问题内容: constructor(){ super(); this.state = { address: { street:null, city:null, postalCode: null } }; } postalCodeChange(e){ this.setState.address.postalCode = e.target.value; console.log(this.state);

  • 我是reactjs的新手,我不知道如何从父组件中更改子组件的状态。下面是代码 每当对父组件中的执行时,我希望子组件接收。 有什么建议吗?

  • 问题内容: 我处于状态的对象数组: 我需要能够基于id属性搜索items数组,然后更新对象属性。 我可以使用id参数通过数组或在数组上获取对象。 我遇到的麻烦是更新数组,然后更新状态而不会发生突变。 此时,我有一个匹配的对象,可以使用对象传播来更新它的属性: 我的问题是我该如何更新状态,以使其覆盖初始查找操作返回的对象? 问题答案: 您的更新功能如下所示 你这样使用它 毛吧? 如果您继续以这种方式

  • 问题内容: 我觉得我已经在阳光下尝试了所有东西,但是一定缺少一些非常明显的东西。在下面,我试图将一个新项目推入数组并更新状态,但是无论我做什么,状态都不会从初始数组更改。 当我console.log newListItems时,新项目就包括在内,因此到目前为止所有工作都在进行,它是不会更新的实际状态。我想念什么? addItem方法: 我也没有在控制台中收到任何错误消息。 完整代码: 问题答案:

  • 我刚刚开始使用ReactJs开发,并一直遵循serverless-stack.com教程。我已经准备好扩展应用程序并创建一个模板,带有n个子组件,但是在管理孙子组件之间的用户会话时遇到了麻烦。 我有管理用户会话的App.js。但是我在孙子组件中有我的注销按钮,我无法让它调用App.js signOut()函数。 App.js 我的布局组件有一系列不同的组件,如页眉、页脚、导航等。。 最后,我的Na

  • 我正在将父组件的状态从父组件传递到子组件。在子组件中,我有一个不同的状态。我正在对子组件的状态执行一些操作,并且结果必须添加到父组件的状态。因此,在我的父组件中,我编写了一个回调函数,该函数将更新父组件的状态。代码为: 因此,这个函数随后作为道具传递给子组件: 然后在我的子组件中,我试图实现回调函数为: 但这并没有达到预期效果。这是正确的方法吗?有人能帮我吗? 我试图通过实现这里提供的解决方案来解