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

2024-04-09

我正在尝试使用反应表 https://react-table.js.org/#/story/readme使用示例,这是代码:

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 调用获取一个保存在中的 JsonsetState :

[{"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)
    ...

您正在设置data在你的状态到这里的字符串:

...

let responseInfo = JSON.stringify(response)

this.setState({
  data: responseInfo
})

...

...but 反应表正在等待一个数组。

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

也许使用response相反,假设它是一个数组:

...

let response = JSON.parse(request.responseText)

this.setState({
  data: response
})

...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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