gpt4 book ai didi

javascript - Typescript:类型 'Promise<{}>' 无法分配给类型

转载 作者:行者123 更新时间:2023-12-02 21:25:42 25 4
gpt4 key购买 nike

我正在使用 Material 表构建一个表。以下是如何构建表的示例:https://material-table.com/#/docs/features/filtering

我正在尝试在 data 中传递一个数组,以填充我的 Userlist 数组中的字段。

我的 componentDidMount() 函数中有这个

    pnp.sp.web.lists.getByTitle("Team").items.get().then((items: any[]) => {
//console.log(items);
const UserList = items.map((item) => {

return {
UsersName: item.Title,
UserEmail: item.Email_x0020_Address,
UserStatus: item.Status,
UserLocation: item.Location,
UserAdditional: item.Additional,
}
});
//console.log(UserList);

this.setState({ UserList: [...UserList] });

});

在我的渲染中我有这个:

        <MaterialTable
title=""
columns={[
{ title: 'Name', field: 'UsersName' },
{ title: 'Email', field: 'UserEmail' },
{ title: 'Status', field: 'UserStatus' },
{ title: 'Location', field: 'UserLocation' },
{ title: 'Additional', field: 'UserAdditional' },
]}
data={new Promise((resolve,reject) => {
(this.state.UserList)
})}
options={{
filtering: true
}}
/>

最初我有 data={this.state.Userlist} 但收到 _this.props.data is not a function at MaterialTable 错误。

所以我改变了,所以我传递了数据以绕过错误,但现在收到此错误:

 error TS2322: Type 'Promise<{}>' is not assignable to type '({ UsersName: any; } & { UserEmail: any; } & { UserStatus: any; } & { UserLocation: any; } & { UserAdditional: any; })[] | ((query: Query<{ UsersName: any; } & { UserEmail: any; } & { UserStatus: any; } & { UserLocation: any; } & { ...; }>) => Promise<...>)'.

最佳答案

我对 ReactJS 没有丰富的了解,基本上我是 Angular 的人,但在搜索时我发现了这个。

执行流程:

Order of execution in react

方法一:

将方法从 componentWillMount 更改为 UNSAFE_componentWillMount,因为 componentWillMount 已于 2018 年弃用。更多信息请参见 https://dev.to/torianne02/componentwillmount-vs-componentdidmount-5f0n

UNSAFE_componentWillMount()
{
this.setState({ UserList: [] });
pnp.sp.web.lists.getByTitle("Team").items.get().then((items: any[]) => {
//console.log(items);
const UserList = items.map((item) => {

return {
UsersName: item.Title,
UserEmail: item.Email_x0020_Address,
UserStatus: item.Status,
UserLocation: item.Location,
UserAdditional: item.Additional,
}
});
//console.log(UserList);

this.setState({ UserList: [...UserList] });
});
}

方法2:在构造函数中初始化状态:

constructor() {
// Required step: always call the parent class' constructor
super(props);

// Set the state directly.
this.state = {
UserList: [],
//if you have any other state variables add here
}
}

在 componentDidMount 中进行 get 调用

componentDidMount(){
pnp.sp.web.lists.getByTitle("Team").items.get().then((items: any[]) => {
//console.log(items);
const UserList = items.map((item) => {

return {
UsersName: item.Title,
UserEmail: item.Email_x0020_Address,
UserStatus: item.Status,
UserLocation: item.Location,
UserAdditional: item.Additional,
}
});
//console.log(UserList);

this.setState({ UserList: [...UserList] });
})
}

两种情况下的渲染函数

render(){
return ( <MaterialTable
title=""
columns={[
{ title: 'Name', field: 'UsersName' },
{ title: 'Email', field: 'UserEmail' },
{ title: 'Status', field: 'UserStatus' },
{ title: 'Location', field: 'UserLocation' },
{ title: 'Additional', field: 'UserAdditional' },
]}
data={this.state.Userlist}
options={{
filtering: true
}}
/>)
}

关于javascript - Typescript:类型 'Promise<{}>' 无法分配给类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60746905/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com