javascript - CompondentDidMount 失败 propType - 将 fetch 定义为 var

Question

我正在尝试将 CompondentDidMount 添加到我的类中。

但是，这会返回错误:

propType 失败:提供给 IndexRoute 的 prop component 无效。

这是我使用 ComponentDidMount 的尝试:

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: []
      };
    },

此外，如果手动将我的 json 数据设置为像这样的 var，我的代码也可以正常工作:

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
                });
              })
            );
        }, []
);

完整代码在此代码笔中:

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

Answer 1

在渲染函数中，我使用了“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
            });
          })
        );
    }, 
[]
);