javascript - 在 React 中状态作为数组有什么问题？

Question

开始学习 React，但将我的状态设置为数组。 当我做类似的事情时，我的状态没有得到正确的更新

this.setState(state => [newItem, ...this.state])

上面的语句将数组转换为整数索引对象

我收到警告

index.js:2178 警告:App.state:必须设置为对象或 null

看起来像这样的react-dom代码中有一些检查

if (state && (typeof state !== 'object' || isArray(state))) {

link

为什么会出现这种情况

如果我将状态用作数组或除对象或 null 之外的其他内容，我可能会遇到哪些问题

Answer 1

setState接受简单明了的对象。如果您调用this.setState(['a','b'])它将把你的数组转换为类似数组的对象。为什么？因为 React 允许在代码的其他地方你应该能够调用 this.setState({data: 'something'})没有失败。供引用this.state现在看起来像这样:

{
  0: 'a',
  1: 'b',
  data: 'something'
}

为什么会收到警告？因为 React 在幕后执行了从数组到类数组对象的转换，并且想让你知道事情已经发生了变化。例如，将状态设置为数组后，您将无法调用 this.state.map ...或任何其他数组方法。

如果需要在状态中存储数组，请将其设置为对象属性:this.setState({arrayData: ['a', 'b']}) 。一般来说，将数据包装在对象属性中是一个很好的做法，因为您肯定会 lifting state up当您开发应用程序时。