TSX компонентный массив, компонент внутри массива

Question

Я пытаюсь создать массив дочерних компонентов в tsx, а затем добавить экземпляр в массив в следующем коде:

import ShoppingList from './ShoppingList';    
interface TPState {
  shoppingLists2: ShoppingList[];
  shoplistsums: number[];
  sum: number;
}

class TotalPrice extends React.Component<{}, TPState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      shoppingLists2: [ShoppingList],
      sum: 0
    }
  }

, но получаю сообщение об ошибке, что его нельзя назначить.Я использую массив для добавления компонента при нажатии кнопок на странице, и я добавляю исходный элемент, как это.Почему это неправильно?

Answer 1

Не уверен, какое сообщение об ошибке вы получаете, это может быть 2 вещи. Сначала вы можете указать, что [ShoppingList] приведен как тип. также необходимо указать все параметры состояния

class TotalPrice extends React.Component<{}, TPState> {
  public state = {
    shoppingLists2: [ShoppingList] as ShoppingList[], //  as ShoppingList[] may not be needed but dont know without the error message
    sum: 0,
    shoplistsums: [] // you were missing this item in your state, proabably what the issue was
  }
}

РЕДАКТИРОВАТЬ: вам нужно определить тип для списка покупок .. вместо того, чтобы использовать его в качестве типа.

interface IShoppingList {
  someKey: number
  someOtherKey: string
}

тогда тип вашего штата

interface TPState {
  shoppingLists2: IShoppingList[];
  shoplistsums: number[];
  sum: number;
}