Javascript Typescript:Type'；承诺<；{}>'；不可分配给类型

我正在用材质表构建一个表。下面是一个如何构建表的示例：

我试图在

数据中传递一个数组，以填充my
用户列表中的字段

我的
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
            }}
        />

我对这方面的知识不多，基本上我是个棱角分明的人，但在搜索中我发现了这个

执行流程：


方法1:

将方法从componentWillMount更改为UNSAFE_componentWillMount，因为componentWillMount在2018年被弃用。更多信息请参见

方法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
   }}
/>)
}

render（）{
返回（）
}
您希望承诺能做什么？我对此有点困惑。根据我们的理解，
数据
应该是一个数组或一个返回数据的函数。我猜您的数组一开始就丢失了？可以像
data={this.state.data | |[]}
或将初始状态默认为空数组这样简单吗？但我只能凭有限的猜测info@Brian汤普森所以当我把它改成
data={this.state.UserList | | |[]}
时，我得到了'TypeError:_this.props.data不是MaterialTable的函数。'error我还做了一个
{JSON.stringify（this.state.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] });
    })
}

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