Привязка элементов списка к this.state
У меня есть компонент 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} />
Я получаю ошибку времени компиляции:
Type 'Readonly' is missing the following properties from type 'any[]': [Symbol.iterator], [Symbol.unscopables]
Как это исправить?
нет - мое состояние это предметы React.Component<AppProps, Items>
Если не сложно, не могли бы вы показать компонент?
Ответы 2
Я нашел простое решение для этого... Я создал новый тип:
type ItemsState = {
items: Items
}
затем изменил мой компонент, чтобы вместо этого использовать его как состояние: export default class App extends React.Component<AppProps, ItemsState>
Во-первых, я хочу отметить, что шаблоны React не поощряют наследование и предпочитают сочинение.
Более того, вы расширяете массив, в то время как React ожидает объект.
Еще одно заблуждение — «привязать функцию к состоянию». Вы привязываете контекст это, а не к переменным.
Наконец, состояние должно быть сериализуемым, и вы должны помещать в него только объекты и массивы или примитивы.
Попробуйте реорганизовать свои компоненты, следуя этим рекомендациям, или опубликуйте полный код для более комплексного решения.
Спасибо вам за ваши предложения. Не уверен, где я использую inheritance...? Кроме того, массив - это объект, не так ли? Также не уверен, где я привязываю функции к состоянию.
экспорт элементов класса по умолчанию расширяет Array<Item> -> вы расширяете массив. Да, в javascript также массив является объектом, но поскольку индекс массива не тесно связан с его значениями, состояние становится непредсказуемым.
Это наследование не является частью модели компонентов React, которую я создаю... это класс данных - я не думаю, что руководство, на которое вы ссылаетесь, применимо здесь. Спасибо за ваш вклад.
Вы хотели поставить
this.state.myItems?