TypeScript错误-类型“ticket[]undefined”不是数组类型

Question

我如何在使用ts时将一个项追加到一个状态（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]
            })
    }

我一直得到这个错误：

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

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

Answer 1

您的代码中没有什么问题，您可以修复这些问题：

1. 删除可选的from状态并用空数组初始化

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

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

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),
    })
}