如何解决打字稿错误 - 输入“Ticket[]”| undefined' 不是数组类型
如何在使用 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]
})
}
我不断收到此错误:
输入'票[] | undefined' 不是数组类型。
我试过了:
let addData:Ticket[] = this.fetchNewData()
也是我得到的错误:
类型 'Promise
我尝试用各种变体写它,但没有运气。
此行中的两个指向错误:
> 144 | tickets: [...this.state.tickets,addData]
| ^
解决方法
您的代码中几乎没有问题,您可以解决这些问题:
- 从状态中移除可选项并用空数组初始化它
export type AppState = {
tickets: Ticket[] // remove the ?
// ...
}
constructor(props) {
super(props)
this.state = {
tickets: [],// ...
}
}
- 假设
addData
是Ticket
的数组,你需要让handleLoadMore
函数async
在await
上使用this.fetchNewData
来获取数据由它返回:
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),})
}
,
你也应该解构 adddata
。
tickets: [...this.state.tickets,...addData]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。