Question

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

下面你可以看到我的代码

filename = br.retrieve(link.get('href'),
os.path.expanduser("~/Desktop/Job Postings/Hirist/" + str(i) +
".pdf"))[0]

但是我得到了下面的错误，因为我在find查询的done方法中返回渲染。

未捕获错误：不变违规：Ap.render（）：必须返回有效的ReactComponent。您可能已经返回了undefined，数组或其他一些无效对象。

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

我还有另一个我无法理解的

未捕获的TypeError：无法读取未定义的属性'foo'

因为我是新来的反应和解析所以任何帮助都会受到赞赏

Answer 1

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

Answer 2

在组件的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);

在解析查找查询后，Reactjs渲染组件

2 个答案: