CompondentDidMount 실패 propType- fetch를 var로 정의하십시오.

Question

내 클래스에 CompondentDidMount를 추가하려고합니다.

실패하여 PropType : IndexRoute에 공급 잘못된 소품 component

그러나, 이것은 오류를 반환합니다.

var PHOTODATA = [{ ... *json data* ... }] 

    ... 

var PhotoGallery = React.createClass({ 

     getInitialState: function() { 
     return { 
     displayedCategories: [] 
     }; 
    }, 

    ... 

    render: function(){ 
     var uniqueCategories = PHOTODATA.map(function (photo) { 
      return photo.tag; // tag is a list of tags... 
     }).reduce(function (uniqueList, someTags) { 
      return uniqueList.concat(
       someTags.filter(function (thisTag) { 
       return !uniqueList.some(function(uniqueTag) { 
        return uniqueTag.id === thisTag.id && uniqueTag.taglevel === thisTag.taglevel 
       }); 
       }) 
      ); 
     }, [] 
); 

전체 코드는 다음에 수동으로이 같은 VAR로 내 JSON 데이터를 설정 한 경우

또한

var PhotoGallery = React.createClass({ 
    componentDidMount() { 
    return fetch("http://localhost:8000/api/test/?format=json") 
     .then((response) => response.json()) 
     .then((json) => { 
     console.log(json); 
     this.setState({PHOTODATA: json}) 
     }) 
    }, 
     getInitialState: function() { 
     return { 
     displayedCategories: [] 
     }; 
    }, 

, 내 코드가 잘 작동 : 여기

는 ComponentDidMount 이용할 수 있도록 시도 코드 :

http://codepen.io/yarnball/pen/GqbyWr?

Answer 1

render 함수에서 "var PHOTODATA = this.state.PHOTODATA"를 사용 했으므로 이전에 var처럼 사용할 수있었습니다.

나는 또한 멀리있는의 ComponentDidMount를 정의하지 않았다 내가 대신과 같이 "수출"을 사용 :

export default React.createClass({ 
    componentWillMount() { 
    return fetch("http://localhost:8000/api") 
     .then((response) => response.json()) 
     .then((json) => { 
     console.log(json); 
     this.setState({testapi: json}) 
     }) 
    }, 

이 지금 일 :

render: function(){ 
    var PHOTODATA = this.state.PHOTODATA 
    var uniqueCategories = PHOTODATA.map(function (photo) { 
     return photo.tag; // tag is a list of tags... 
    }).reduce(function (uniqueList, someTags) { 
     return uniqueList.concat(
      someTags.filter(function (thisTag) { 
      return !uniqueList.some(function(uniqueTag) { 
       return uniqueTag.id === thisTag.id && uniqueTag.taglevel === thisTag.taglevel 
      }); 
      }) 
     ); 
    }, 
[] 
);