Question

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

未捕获的TypeError：this.state.navitems.map不是函数

但我从未在本地主机上收到此错误。

反应：

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
}]

Answer 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));
}

Answer 2

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

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

ReactJS - this.state。[object] .map不是函数？

2 个答案: