javascript - 解析查找查询后组件的 Reactjs 渲染

Question

我正在尝试做的是，当加载页面时，它应该从 parse.com 数据库中获取所有数据并将其显示在页面上，我想在完成查找请求后呈现我的组件。

下面你可以看到我的代码

var Ap = React.createClass({

    render: function(){
      Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
      var GameScore = Parse.Object.extend("TestObject");

      var query = new Parse.Query(GameScore);
      var x;
      query.find({
      success: function(results) {
          //debugger;
         var cells = [];
         for (var i in results) {
            cells.push(<tr><td>"foo"</td><td>{i.attributes.foo}</td></tr>);}
        return (
          <div id="second-div">
            <table>
              {cells}
            </table> 
          </div>
          )

      },

      error: function(error) {
        return(<div></div>)

      }
});
    }

  }
  );

  React.renderComponent(<Ap/>,  document.body);

</script>

但我收到以下错误，因为我在查找查询的完成方法中返回渲染。

Uncaught Error: Invariant Violation: Ap.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

有没有办法在开始渲染之前等待我的查找查询结束

我还有一个我无法理解的问题

Uncaught TypeError: Cannot read property 'foo' of undefined

由于我是 reactjs 和解析的新手，所以任何帮助将不胜感激

Answer 1

在组件的 componentDidMount 方法中执行请求并将结果分配给组件的状态。这将导致组件的渲染。

在 render 方法中从状态中读取数据。

var Ap = React.createClass({
    getInitialState: function(){
        return {
            data: []
        }
    },
    componentDidMount: function(){
        var that = this;
        Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
        var GameScore = Parse.Object.extend("TestObject");

        var query = new Parse.Query(GameScore);

        query.find({
            success: function(results) {
                that.setState({
                    data: results
                });
            },
            error: function(error) {
                that.setState({
                    data: []
                });

            }
        });
    },
    render: function(){
        var cells = [];
        for (var i in this.state.data) {
            cells.push(<tr><td>"foo"</td><td>{this.state.data[i].attributes.foo}</td></tr>);
        }
        return (
          <div id="second-div">
            <table>
              {cells}
            </table> 
          </div>
          )
    }
});

React.renderComponent(<Ap/>,  document.body);