listDate를 추출하려고 하면 map에서 undefine이라는 메시지가 뜹니다. listDate를 출력하면 map 메소드가 있다고 나옵니다. 왜 이런가요?
코드는 매우 간단합니다. 중국 리액트 사이트 예시입니다.
PHP 코드는 다음과 같습니다.
<code>{ "status":0, "records":{ "title": "Here's the book list", "listData": [ {"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"}, {"name": "女人天生高贵", "author": "XiaoDong"}, {"name": "海是彩色的灰尘", "author": "XiaoXi"} ] } }</code>
리액트 코드입니다
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div id="content"></div> </body> <script type="text/babel"> var ContentBox = React.createClass({ loadCommentsFromServer(){ $.ajax({ url: this.props.url, type: 'GET', dataType: 'json', cache: false, success: function (res) { if (res.status == 0) { this.setState({data: res.records}); } }.bind(this), error: function (xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState (){ return { data: [] }; }, componentDidMount: function () { this.loadCommentsFromServer(); // setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render (){ return ( <div className="ContentBox"> <ContentTitle title={this.state.data.title}/> <ContentList listData={this.state.data.listData}/> </div> ); } }); var ContentTitle = React.createClass({ render (){ return ( <div className="ContentTitle"> <h1>{this.props.title}</h1> </div> ); } }); var ContentList = React.createClass({ render (){ let dataItem = this.props.listData.map(function (data) { return ( <ContentListItem data={data}/> ); }); return ( <div className="ContentList"> {dataItem} </div> ); } }); var ContentListItem = React.createClass({ render (){ return ( <div className="ContentListItem"> <h3 className="ContentListItem-name">{this.props.data.name}</h3> <span className="ContentListItem-author">{this.props.data.author}</span> </div> ); } }); ReactDOM.render( <ContentBox url="./data.php" pollInterval={2000}/>, document.getElementById('content') ); </script> </html></code>
listDate를 추출하려고 하면 map에서 undefine이라는 메시지가 뜹니다. listDate를 출력하면 map 메소드가 있다고 나옵니다. 왜 이런가요?
코드는 매우 간단합니다. 중국 리액트 사이트 예시입니다.
PHP 코드는 다음과 같습니다.
<code>{ "status":0, "records":{ "title": "Here's the book list", "listData": [ {"name": "沙滩搁浅我们的旧时光", "author": "XiaoMing"}, {"name": "女人天生高贵", "author": "XiaoDong"}, {"name": "海是彩色的灰尘", "author": "XiaoXi"} ] } }</code>
리액트 코드입니다
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div id="content"></div> </body> <script type="text/babel"> var ContentBox = React.createClass({ loadCommentsFromServer(){ $.ajax({ url: this.props.url, type: 'GET', dataType: 'json', cache: false, success: function (res) { if (res.status == 0) { this.setState({data: res.records}); } }.bind(this), error: function (xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState (){ return { data: [] }; }, componentDidMount: function () { this.loadCommentsFromServer(); // setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render (){ return ( <div className="ContentBox"> <ContentTitle title={this.state.data.title}/> <ContentList listData={this.state.data.listData}/> </div> ); } }); var ContentTitle = React.createClass({ render (){ return ( <div className="ContentTitle"> <h1>{this.props.title}</h1> </div> ); } }); var ContentList = React.createClass({ render (){ let dataItem = this.props.listData.map(function (data) { return ( <ContentListItem data={data}/> ); }); return ( <div className="ContentList"> {dataItem} </div> ); } }); var ContentListItem = React.createClass({ render (){ return ( <div className="ContentListItem"> <h3 className="ContentListItem-name">{this.props.data.name}</h3> <span className="ContentListItem-author">{this.props.data.author}</span> </div> ); } }); ReactDOM.render( <ContentBox url="./data.php" pollInterval={2000}/>, document.getElementById('content') ); </script> </html></code>
첫 번째 렌더링 시 비동기 데이터가 반환되기 전에 listData가 정의되지 않았기 때문일 것입니다. 초기 값을 []로 지정하면 괜찮습니다
오류 메시지를 잘 보셨나요? Cannot read property 'map' of undefined
맵이 정의되지 않은 것이 아니라 map이라는 객체가 정의되지 않았기 때문입니다
컴포넌트가 초기화된 상태는 이렇습니다
<code>{ data: [] }</code>
그럼 ContentList
에 부여한 listData
속성의 값은 this.state.data.listData
입니다. 이때 ajax는 데이터를 반환하지 않았으며 listData는 정의되지 않아야 합니다