Привязка элементов списка к this.state

Question

У меня есть компонент 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]

Как я могу это исправить?

reactjs typescript

0

Leo 29 Май 2019 в 18:34

Answer 1

Я нашел простое решение для этого ... Я создал новый тип:

type ItemsState = {
    items: Items
}

Затем изменил мой компонент, чтобы использовать его вместо состояния: export default class App extends React.Component<AppProps, ItemsState>

0

Leo 29 Май 2019 в 15:43

Answer 2

Во-первых, я хочу отметить, что шаблоны React препятствуют наследованию и предпочитают состав.

Кроме того, вы расширяете массив, в то время как React ожидает объект.

Другое заблуждение - «привязать функцию к государству». Вы связываете этот контекст, а не с переменными.

Наконец, состояние должно быть сериализуемым, и вы должны помещать в него только объекты, массивы или примитивы.

Попробуйте провести рефакторинг компонентов, следуя этим рекомендациям, или опубликуйте полный код для более комплексного решения.

0

Mosè Raguzzini 29 Май 2019 в 15:43

2 ответа