2016-08-24 2 views
0

React를 학습 중입니다. 나는 그들이 내가 이것을 실행하면, 내가React throwing 오류 : 정의되지 않은 'map'속성을 읽을 수 없습니다.

"TypeError: Cannot read property 'map' of undefined 
    at t.render (mikobuf.js:55:41) 
    at _renderValidatedComponentWithoutOwnerOrContext (https://npmcdn.com/[email protected]/dist/react.min.js:13:17508) 
    at _renderValidatedComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:17644) 
    at performInitialMount (https://npmcdn.com/[email protected]/dist/react.min.js:13:13421) 
    at mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:12467) 
    at Object.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:15:2892) 
    at h.mountChildren (https://npmcdn.com/[email protected]/dist/react.min.js:14:26368) 
    at h._createInitialChildren (https://npmcdn.com/[email protected]/dist/react.min.js:13:26619) 
    at h.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:13:24771) 
    at Object.mountComponent (https://npmcdn.com/[email protected]/dist/react.min.js:15:2892)" 

는 AS 콘솔에 오류가 표시

getInitialState: function() { 
     return {changeSets: []}; 
    }, 
    mapOpenLibraryDataToChangeSet : function (data) { 
    return data.map(function (change, index) { 
     return { 
     "when":jQuery.timeago(change.timestamp), 
     "who": change.author.key, 
     "description": change.comment 
     } 
    }); 
    }, 
    componentDidMount: function() { 
     $.ajax({ 
      url: 'http://openlibrary.org/recentchanges.json?limit=10', 
      context: this, 
      dataType: 'json', 
      type: 'GET' 
     }).done(function (data) { 
//    console.log(data); 
      var changeSets = this.mapOpenLibraryDataToChangeSet(data); 
      console.log("changeSets:" + JSON.stringify(changeSets)); 
      this.setState({changeSets: changeSets}); 
     }); 
    }, 

로 된 구성 요소의 상태를 componentDidMount에서 API에서 데이터를로드하고 업데이트 책에서 장을 다음입니다 실행중인 링크는 http://jsbin.com/mikobuf/edit?js,console,output

무엇이 잘못 되었나요?

UPDATE

응용 프로그램을 렌더링하는 동안 나는 changeSets={data}을 추가, 나는 콘솔

ReactDOM.render(<App headings = {headings} changeSets={data}/>, document.getElementById("container")) 

의 데이터를 참조하지만 데이터가 API에서 가져온되고 싶어요. 그래서 빨리 렌더링 할 때 나는 changeSets={data}을 분리 할 때, 그것은 당신이 실제로 App의 상태의 일부입니다 때 소품 changeSets를 사용하려고

ReactDOM.render(<App headings = {headings}/>, document.getElementById("container")) 
+0

귀하의 아약스 호출 오류를 던지고있다. 'map'은 배열에서만 정의됩니다. –

+0

제공 한 정보에 따르면 '데이터'는 '정의되지 않음'입니다. –

+0

내 업데이트 – daydreamer

답변

1

실패합니다.

이 :

<RecentChangesTable.Rows changeSets={this.props.changeSets} />

가되어야한다 ' "오류"`:

<RecentChangesTable.Rows changeSets={this.state.changeSets} />

http://jsbin.com/tuqeciyere/1/edit?js,console,output

+0

흥미롭게도 데이터는 상태'changeSets = {this.state.changeSets} '를 사용하여 전달되지만 자식 구성 요소는'this.props'로' {this.props.changeset.when}'로 사용합니다. 이것은 처음부터 혼란스럽게 보입니다. – daydreamer

+0

상태는 구성 요소의 내부입니다. 소품은 당신이 전달하는 것입니다. 당신이 구성 요소에 데이터를 전달하는 경우'props'를 사용해야합니다. 내부 상태를 변경하려면'state'를 사용하십시오. 그것은 10 초의 개관이었고 나는 일을 설명하는 데 최선이 아니 었습니다. 부모로부터 데이터를받는 하위 컴포넌트에서'props'를 사용합니다. (부모가'state'에서 그 데이터를 보유하고 있더라도) –

+0

처음으로 게시 한 것과 귀하의 bin이 변경된 것 같습니다. 그래서 나는 그 문제가 더 이상 무엇인지 모른다. –

관련 문제