CompondentDidMountが失敗しましたpropType-フェッチを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

レンダリング関数では、 "var PHOTODATA = this.state.PHOTODATA"を使用しました。以前はvarのように使用できました。

また、私はそうのような遠Iの代わりに使用される「輸出」に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 
      }); 
      }) 
     ); 
    }, 
[] 
);