Question

我有一个组件有这样的状态：

this.state = {
  items: {
    itemA: {
      name: "itemA",
      active: false
    },
    itemB: {
      name: "itemB",
      active: false
    },
    itemC: {
      name: "itemC",
      active: false
    }
  }
};

我尝试做的是将items对象的active属性中的所有对象更改为true。我可以为每个项目硬编码setState，但我认为我们可以做得更好。

我的想法是循环遍历items对象的所有键，并将每个键的active属性设置为true。到目前为止，这是我的代码：

const keys = Object.keys(this.state.items);
for (let i = 0; i < keys.length; i++) {
  this.setState({
    tools: {
      ...this.state.items,
      [keys[i]]: {
        ...this.state.items[keys[i]],
        active: true
      }
    }
  });
}

但这只是更新了active的{{1}}属性，而itemC和itemA仍然是假的。

如何使用itemB一次更新多个计算属性？

Answer 1

在你的回答中，在调用this.state.items之前，你正在改变setState对象，这是不理想的。尝试分配给新对象。像这样：

const newItems = {};

const keys = Object.keys(this.state.items);

keys.forEach(key => {
    newItems[key] = {
        ...this.state.items[key],
        active: true,
    };
});

this.setState({ items: newItems });

Answer 2

我最终搞清楚了。

不是为每个setState对象调用setState，而是将变量设置为this.state.items，更新变量，然后调用this.state.items一次以设置setState返回更新的变量。像这样：

this.state.items

使用setState一次更新多个计算属性？

2 个答案: