未捕获的类型错误:s.map 不是 ReactJs 中的函数

IT技术 javascript reactjs
2021-05-03 01:37:06

我正在尝试使用示例来使用ReactTable,这是用于此的代码:

class UsersTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    };    

    render() {                
        return (
            <div>
                <ReactTable
                    data={this.state.data}
                    columns={[
                        {
                            Header: "ID",
                            accessor: "id"
                        },
                        {
                            Header: "Name",
                            accessor: "name"
                        }
                    ]}
                    onFetchData={(state, instance) => {
                        let request = new XMLHttpRequest();
                        request.open("GET", '/get/roles', true);
                        request.send();
                        request.onload = function() {
                            if (request.status === 200) {
                                let response = JSON.parse(request.responseText);
                                let responseInfo = JSON.stringify(response);

                                this.setState({
                                    data: responseInfo
                                })
                            }
                        }.bind(this);
                    }}
                    defaultPageSize={5}
                    className="-striped -highlight"
                    manual
                />
            </div>
        );
    }
}

我的 GET 调用获取了一个保存在setState以下位置的 Json

[{"id":4732298045947904,"name":"ROLE_EXECUTIVE"},{"id":5207287069147136,"name":"ROLE_ADMIN"},{"id":5858197952790528,"name":"ROLE_PLAYER"},{"id":6333186975989760,"name":"ROLE_USER"},{"id":6561885394567168,"name":"ROLE_TAKER"}]

但是当我运行浏览器时,表格没有打印任何行,但我找不到问题所在:

Uncaught TypeError: s.map is not a function
    at t.value (react-table.js:6)
    at t.value (react-table.js:6)
    at p.updateComponent (react-dom.min.js:13)
    at p.receiveComponent (react-dom.min.js:13)
    ...
1个回答

在此处将状态中的数据设置为字符串:

...

let responseInfo = JSON.stringify(response)

this.setState({
  data: responseInfo
})

...

...但是ReactTable需要一个数组。

字符串没有map方法,这很可能是您收到错误的原因。

如果它是一个数组,也许可以使用response来代替:

...

let response = JSON.parse(request.responseText)

this.setState({
  data: response
})

...