[英]Typescript : Type 'Promise<{}>' is not assignable to type 'Promise<void>'
[英]Typescript: Type 'Promise<{}>' is not assignable to type
我正在使用材料表構建一個表。 以下是如何構建表格的示例: 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
錯誤時得到一個_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 人,但在搜索時我發現了這個。
執行流程:
方法一:
從componentWillMount方法更改為UNSAFE_componentWillMount因為componentWillMount在2018.More棄用這里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] });
});
}
方法二:在構造函數中初始化狀態:
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
}}
/>)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.