将列表项绑定到 this.state

Question

>我有一个定义为：

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 的模式不鼓励继承，更喜欢组合

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

另一个误解是"将函数绑定到状态"。您正在绑定此上下文，而不是绑定到变量。

最后，state 必须是可序列化的，并且您应该只在其中放置对象和数组或基元。

尝试按照本指南重构组件，或发布完整的代码以获得更全面的解决方案。