未捕获的 TypeError：s.map 不是 ReactJs 中的函数答案

【问题标题】：Uncaught TypeError: s.map is not a function in ReactJs未捕获的 TypeError：s.map 不是 ReactJs 中的函数
【发布时间】：2017-11-15 19:12:35
【问题描述】：

我正在尝试通过示例使用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)
    ...

【问题讨论】：

我建议检查您的所有脚本、跨源策略等。

标签： javascript reactjs

【解决方案1】：

您在此处将您所在州的 data 设置为字符串：

...

let responseInfo = JSON.stringify(response)

this.setState({
  data: responseInfo
})

...

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

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

也许使用 response 代替，只要它是一个数组：

...

let response = JSON.parse(request.responseText)

this.setState({
  data: response
})

...

【讨论】：