ReactJS - this.state.[object].map 不是函数吗？答案

【问题标题】：ReactJS - this.state.[object].map is not a function?ReactJS - this.state.[object].map 不是函数吗？
【发布时间】：2016-10-23 08:37:37
【问题描述】：

为什么我在实时服务器上收到此错误：

未捕获的类型错误：this.state.navitems.map 不是函数

但我的本地主机上从未出现此错误。

reactjs：

import React from 'react'; import $ from 'jquery';

import NavItem from './nav-item';

class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            navitems: [],
        };
    }

    // Then fetch the data using $.get():
    componentDidMount() {
        this.serverRequest = $.get(this.props.source, function (result) {
            this.setState({
                navitems: result
            });
        }.bind(this));
    }

    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        var loop = this.state.navitems.map(function(item, index){
            return <NavItem key={index} item={item}></NavItem>;
        });

        return (
            <div>
                <div className="nav">
                    <ul>{ loop }</ul>
                </div>
            </div>
        )
    } }

export { Footer as default }

有什么办法可以解决这个问题吗？

编辑：

componentDidMount() {
    console.log('props.source', this.props.source);
    this.serverRequest = $.get(this.props.source, function (result) {
        console.log('returned result', result);
        this.setState({
            navitems: result
        });
    }.bind(this));
}

结果：

props.source ./data/nav.json

returned result [{
    "navId": "1",
    "title": "Home",
    "code": "home",
    "href": null,
    "style": null,
    "sort": "1",
    "url": "#",
    "parentId": null,
    "totalChildren": "0",
    "createdOn": null,
    "updatedOn": null
}, {
    "navId": "2",
    "title": "About",
    "code": "about",
    "href": null,
    "style": null,
    "sort": "2",
    "url": "#",
    "parentId": null,
    "totalChildren": "0",
    "createdOn": null,
    "updatedOn": null
}, {
    "navId": "3",
    "title": "Contact",
    "code": "contact",
    "href": null,
    "style": null,
    "sort": "3",
    "url": "contact",
    "parentId": null,
    "totalChildren": "0",
    "createdOn": null,
    "updatedOn": null
}]

【问题讨论】：

标签： jquery reactjs ecmascript-6

【解决方案1】：

我猜你的问题可能出在这里：

// Then fetch the data using $.get():
componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
        this.setState({
            navitems: result
        });
    }.bind(this));
}

您是否能够检查this.props.source 等于什么？如果正确，您是否有任何跨域请求问题？添加一些日志，看看检查器给你什么：

// Then fetch the data using $.get():
componentDidMount() {
    console.log('props.source', this.props.source);
    this.serverRequest = $.get(this.props.source, function (result) {
        console.log('returned result', result);
        this.setState({
            navitems: result
        });
    }.bind(this));
}

【讨论】：

顺便说一句，什么是跨域请求问题？
如果它是由跨域“CORS”问题引起的，您需要在将请求发回给您的服务器上设置正确的标头。在请求中添加标头 Access-Control-Allow-Origin: * 可能会起作用，但请注意不要将服务器打开到意外请求。
MDN 有一些很好的文档：developer.mozilla.org/en-US/docs/Web/HTTP/…
我确实通过 console.log 得到了我想要的结果。但它是文本而不是对象！为什么？？请参阅我上面的编辑。谢谢。
也许您的服务器没有设置正确的Content-type？我认为如果将其设置为application/json，那么 jQuery 会自动为您将其转换为对象。

【解决方案2】：

我的快速解决方案 - $.getJSON:

componentDidMount() {
        this.serverRequest = $.getJSON(this.props.source, function (result) {
            this.setState({
                article: result
            });
        }.bind(this));
    }

【讨论】：