У меня есть компонент React, определенный как:
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} />
Я получаю ошибку времени компиляции:
В типе «Только для чтения» отсутствуют следующие свойства типа «любой []»: [Symbol.iterator], [Symbol.unscopables]
Как это исправить?
2 ответа
Я нашел простое решение для этого ... Я создал новый тип:
type ItemsState = {
items: Items
}
Затем изменил мой компонент, чтобы использовать его вместо состояния: export default class App extends React.Component<AppProps, ItemsState>
Во-первых, я хочу отметить, что шаблоны React препятствуют наследованию и предпочитают состав.
Кроме того, вы расширяете массив, в то время как React ожидает объект.
Другое заблуждение - «привязать функцию к государству». Вы связываете этот контекст, а не с переменными.
Наконец, состояние должно быть сериализуемым, и вы должны помещать в него только объекты, массивы или примитивы.
Попробуйте провести рефакторинг компонентов, следуя этим рекомендациям, или опубликуйте полный код для более комплексного решения.
Похожие вопросы
Новые вопросы
reactjs
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он использует декларативную компонентную парадигму и стремится быть одновременно эффективным и гибким.