は、なぜ私がライブサーバー上でこのエラーが出るん:ReactJS - this.state。[オブジェクト] .mapは関数ではありませんか?
Uncaught TypeError: this.state.navitems.map is not a function
をしかし、私は私のローカルホスト上で、このエラーを取得することはありません。
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 }
私はこの問題を解決することができますどのように任意のアイデア?
EDIT:
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
}]
感謝。それが原因で発生した場合、どうすれば修正できますか? – laukok
クロスドメインリクエストの問題は何ですか?btw? – laukok
クロスドメイン "CORS"によって問題が発生した場合は、リクエストを送り返しているサーバーに正しいヘッダーを設定する必要があります。要求に応じて 'Access-Control-Allow-Origin:*'というヘッダーを追加してください。予期せぬ要求までサーバーを開かないように注意してください。 – casr