将列表项绑定到this.state

Question

我的Recact组件定义为：

export default class App extends React.Component<AppProps, Items>

Items类的定义为：

export default class Items extends Array<Item>

Item只是一个具有许多属性的类。

如果在render()中，我直接将列表绑定到Items对象。

<List items={myItems} onRenderCell={this._onRenderCell} />

该列表显示正确，但是如果我this.setState(myItems)然后尝试使该列表绑定到状态：

<List items={this.state} onRenderCell={this._onRenderCell} />

我收到编译时错误：

  

    

类型“只读”缺少类型“ any []”中的以下属性：[Symbol.iterator]，[Symbol.unscopables]

  

我该如何解决？

Answer 1

我找到了一个简单的解决方案...我创建了一个新类型：

type ItemsState = {
    items: Items
}

然后更改了我的组件以将其用作状态：export default class App extends React.Component<AppProps, ItemsState>

Answer 2

首先，我想指出，React的模式不鼓励继承，而更喜欢composition

此外，您正在扩展数组，而React需要一个对象。

另一个误解是“将功能绑定到状态”。您是在 this 上下文中绑定，而不是绑定到变量。

最后，状态必须是可序列化的，并且应该只将对象，数组或基元放入状态。

尝试遵循此准则来重构您的组件，或发布完整的代码以获得更全面的解决方案。