解析查找查询后组件的Reactjs渲染答案

【问题标题】：Reactjs rendeing of component after parse find query解析查找查询后组件的Reactjs渲染
【发布时间】：2015-10-13 15:45:46
【问题描述】：

我正在尝试做的是在加载页面时，它应该从 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>

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

未捕获的错误：不变违规：Ap.render()：必须返回有效的 ReactComponent。您可能返回了未定义、数组或其他一些无效对象。

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

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

未捕获的类型错误：无法读取未定义的属性 'foo'

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

【问题讨论】：

push(<tr><td>"foo"</td><td>{i.attributes.foo}</td></tr>) 正确引用它。
@BhojendraNepal 我没明白你想说什么
push(<tr>) 会起作用吗？不是。 push('<tr>') 将。
@BhojendraNepal 哦，我明白了。但我仍然遇到 ap.render 错误
首先，您的render 方法不应该用于实现视图之外的逻辑。其次，它应该返回一个组件。您正在返回一个对象。

标签： javascript parse-platform reactjs

【解决方案1】：

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

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

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);

【讨论】：

这给了我这个错误 Uncaught TypeError: undefined is not a function
哦，忘了 'this' 绑定，抱歉。我在最初的答案中修改了代码，请重试。
它现在没有显示任何东西。控制台中甚至没有错误。一切似乎都运行良好，但没有显示任何内容
有没有可能因为找不到 jquery.min.js 而没有显示？？
您可能会得到它，因为您在 for 循环中访问了错误的对象。如果 results 是一个数组，那么 'i' 是元素的索引。在这种情况下，它应该是 this.state.data[i].attributes.foo 而不是 i.attributes.foo。

【解决方案2】：

问题是您从render() 返回了undefined。因为在 ajax 调用之后没有更多代码，render() 必须返回导致错误的undefined。您可以将查询放入 componentDidMount() 或一些较早运行的方法或一些父组件/外部代码，并将 props 传递给 <Ap /> 或设置其状态。
{i.attributes.foo} 可能会导致Uncaught TypeError: Cannot read property 'foo' of undefined。因此，您的 i.attributes 是 undefined 而不是一些有意义的对象，例如 results[i].attributes。

【讨论】：

但是在成功部分我返回了代码，甚至在错误部分我返回了一个 div
我猜是query.find()打电话is asynchronous