Warum erhalte ich diesen Fehler an einem Live-Server:ReactJS - this.state. [Objekt] .map ist keine Funktion?
Uncaught TypeError: this.state.navitems.map is not a function
Aber ich diesen Fehler nie auf meinem localhost bekommen.
Die 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 }
Irgendwelche Ideen, wie ich dieses Problem beheben?
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));
}
Ergebnis:
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
}]
Dank. Wie kann ich das beheben, wenn es dadurch verursacht wird? – laukok
Was ist ein Cross-Domain-Anfrage Problem BTW? – laukok
Wenn es von einem domänenübergreifenden Problem mit "CORS" verursacht wird, müssen Sie die richtigen Header auf dem Server festlegen, der die Anfrage an Sie zurücksendet. Fügen Sie den Header 'Access-Control-Allow-Origin: *' bei Anfragen möglicherweise zu, aber seien Sie vorsichtig, dass Sie Ihren Server nicht für unerwartete Anfragen öffnen. – casr