이유는 라이브 서버에이 오류가 발생합니까 :ReactJS - this.state. [object] .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 }
어떤 아이디어가 내가이 문제를 해결할 수있는 방법?
는 편집 :는
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
도메인 간 요청 문제는 무엇입니까? – laukok
도메인 간 "CORS"로 인해 문제가 발생하면 요청을 다시 보내는 서버에 올바른 헤더를 설정해야합니다. 요청에 대해'Access-Control-Allow-Origin : *'헤더를 추가하되 예기치 않은 요청까지 서버를 열지 않도록주의하십시오. – casr