状态数组（不是对象）和扩展运算符答案

【问题标题】：State arrays (not objects) and the spread operator状态数组（不是对象）和扩展运算符
【发布时间】：2019-09-01 21:11:27
【问题描述】：

我正在使用这样的新键值更新“组件”的反应状态数组中的子数组。

this.setState({
    components: {
       ...this.state.components,
       [this.state.key]: {
          ...this.state.components[this.state.key],
          [key]: v
      }
    }
});

这可行，但它将 this.state.components 从数组更改为我不想要的对象。

我可以的

var result = Object.keys(this.state.components).map(function (k) {
   return { [k]: this.state.components[k] };
});

this.setState({components: result});

修复数据，但设置两次状态似乎很混乱且效率低下。有没有更好的办法？我尝试过使用 [] 而不是 {} 的各种形式，但根据我对扩展运算符的理解，这应该可以工作。

【问题讨论】：

原生 javascript 函数对于不可变对象的操作不是很好。我建议使用图书馆，例如github.com/aearly/icepick 执行操作。您甚至可以使用著名的 Immutable.js 库。
例如，使用icepick库，这将作为this.setState(prevState => i.setIn(prevState, ['components', prevState.key, key], v))

标签： reactjs

【解决方案1】：

您可以在当前处于状态的components 数组上使用map 并在状态中的key 与组件索引不匹配时按原样返回对象，或者如果它们匹配则更改[key] 属性匹配。

this.setState(prevState => ({
  components: prevState.components.map((c, index) =>
    prevState.key === index ? { ...c, [key]: v } : c
  )
}));

【讨论】：