javascript - TypeScript 错误 - 类型 'Ticket[] | undefined' 不是数组类型

在使用 TypeScript 的情况下，如何将一个对象数组的项添加到状态（React）中？

这是我的代码：

export type AppState = {
    tickets?: Ticket[],
}

export type Ticket = {
    id: string,
    title: string;
}

export type ApiC = {
    getTickets: (order:string, page:number) => Promise<Ticket[]>;
}

export class App extends React.PureComponent<{}, AppState> {

    state: AppState = {
    }


   fetchNewData = async () => {
        return await api.getTickets(this.state.currentOrder, this.state.page)
   }

    handleLoadMore = () => {

       let addData:Promise<Ticket[]> = this.fetchNewData()

        if (addData) 
            this.setState({
                tickets: [...this.state.tickets, addData]
            })
    }

我一直收到这个错误：

类型 'Ticket[] | undefined' 不是数组类型。

我尝试过：

let addData:Ticket[] = this.fetchNewData()

也是，我收到的错误是：

类型 'Promise' 缺少类型 'Ticket[]' 的以下属性：length、pop、push、concat 等 28 个属性。类型 'Ticket[] | undefined' 不是数组类型。

我尝试用各种方式写它，但都没有成功。

这一行中的两个指向错误：

  > 144 |               tickets: [...this.state.tickets, addData]
        |                            ^

答案＃1

你的代码中有一些问题，你可以修复这些问题：

1. 从 state 中移除 optional，并用空数组进行初始化

export type AppState = {
  tickets: Ticket[] // remove the ?
  // ...
}

constructor(props) {
  super(props)
  this.state = {
    tickets: [],
    // ...
  }
}

2. 假设 addData 是 Ticket 的数组，你需要将 handleLoadMore 函数设为 async，以便在 this.fetchNewData 上使用 await 来获取它返回的数据：

handleLoadMore = async () => {
  let addData = await this.fetchNewData()

  if (addData)
    this.setState({
      tickets: [...this.state.tickets, ...addData],
    })
    // Or
    this.setState({
      tickets: this.state.tickets.concat(addData),
    })
}

答案＃2

你也应该解构 adddata。

tickets: [...this.state.tickets, ...addData]