Javascript 访问数组时出现问题-类型上不存在

我正在使用SharePoint SPFX中的Typescript React构建一个应用程序。我正在尝试使用数组中的元素构建一个表

在我的

componentDidMount（）

中，我有以下代码来创建数组

public componentDidMount() { 

        pnp.sp.web.lists.getByTitle("List").items.get().then((items: any[]) => {

            const listItems = items.map((item) => {

                return {
                    UsersName: item.Title,
                    UserEmail: item.Email,
                    UserStatus: item.Status,
                    UserLocation: item.Location,                        
                }
            });
            console.log(listItems);


        });

}

在我的渲染中，我现在有一个硬编码，用于显示表格：

public render(): React.ReactElement<ISigninLocationWebpartProps> {

    return (

        <div className={ styles.signinLocationWebpart }>

            <div style={{ maxWidth: "100%" }}>

            <MaterialTable
                title=""
                columns={[
                { title: 'Name', field: 'name' },
                { title: 'Surname', field: 'surname' },
                { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                {
                    title: 'Birth Place',
                    field: 'birthCity',
                    lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
                },
                ]}
                data={[
                { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
                ]}        
                options={{
                filtering: true
                }}
            />


            </div>

        </div>
    );
} 

public render（）：React.ReactElement{
返回(
);
} 

我试图用我的

listItems

数组中的元素替换数据部分。所以我做了一些类似于

data={UserList}

或

data={this.UserList}

的事情，两个都有错误。我需要设置数组的状态才能访问它吗？

import React，{Component}来自'React'；
import React, { Component } from 'react';

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            UserList: []
        }

    }


    componentDidMount() {
        //suppose pnp obj's coming from props
        const { pnp } = this.props;
        pnp.sp.web.lists.getByTitle("List").items.get().then((items: any[]) => {
            const listItems = items.map((item) => {
                return {
                    UsersName: item.Title,
                    UserEmail: item.Email,
                    UserStatus: item.Status,
                    UserLocation: item.Location,
                }
            });


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


        });

    }

    render(): React.ReactElement<ISigninLocationWebpartProps> {

        return (

            <div className= { styles.signinLocationWebpart } >

                <div style={ { maxWidth: "100%" } }>

                    <MaterialTable
                        title=""
                        columns = {
                            [
                                { title: 'Name', field: 'name' },
                                { title: 'Surname', field: 'surname' },
                                { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                                {
                                    title: 'Birth Place',
                                    field: 'birthCity',
                                    lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
                                },
                                ]}
                        data = {this.state.UserList}
                        options = {
                            {
                                filtering: true
                            }
                        }
                    />

                    Debug: {JSON.stringify(this.state.UserList)}

                < /div>

            < /div>
    );

}

export default test;

类测试扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[]
}
}
componentDidMount（）{
//假设pnp obj来自道具
const{pnp}=this.props；
pnp.sp.web.lists.getByTitle（“列表”）.items.get（）。然后（（items:any[]）=>{
const listItems=items.map（（item）=>{
返回{
UsersName:item.Title，
UserEmail:item.Email，
UserStatus:item.Status，
UserLocation:item.Location，
}
});
this.setState（{UserList:[…listItems]}）；
});
}
render（）：React.ReactElement{
返回(
调试：{JSON.stringify（this.state.UserList）}