Question

我开始使用react.js并创建一个组件Box state = {pageNumber: 1, dataForTable:''}。我插入了两个组件 - 分页和表格。点击分页时，它给页面的数量。框状态改变然后渲染，然后分页渲染。然后我将ajax设置为server，获取表的新数据，然后第二次使用Box渲染以呈现Tables。

我应该在哪个函数中放置ajax逻辑？当我把它放入componentDidUpdate时，setState开始以递归方式工作。

将来<Box/ >中的更多组件会更改<Tables />。

Answer 1

根据我的理解，这是您的设置：

var React = require('react');

var ComponentBox = React.createClass({

    render: function() {
        return (
            <div>
                <Table />
                <Pagination />
            </div>
        );
    }

});

module.exports = ComponentBox;

您的表组件永远不应处理数据，您应该将数据“提供”到组件。因此，您应该在表组件中接收数据。
分页组件应该将一个事件传递给ComponentBox，告诉ComponentBox获取数据 - 所以ajax应该在你的ComponentBox中发生（如果你愿意，可以阅读更多关于通量的信息）。

以下是为您提供的建议解决方案

var React = require('react');

var ComponentBox = React.createClass({

    handlePageChange: function(startIndex, size) {
        // do your ajax here
        // set your data to state which causes re-render
    },

    render: function() {
        return (
            <div>
                <Table data={this.state.tableData} />
                <Pagination onPageChange={this.handlePageChange} />
            </div>
        );
    }

});

module.exports = ComponentBox;

在您的分页组件中，请记住通过props onPageChange =）

希望这对你来说足够清楚了。

setState开始在React.js中递归工作

1 个答案: