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

Question

我开始使用react.js并创建一个组件框，state = {pageNumber: 1, dataForTable:''} 。我在其中插入两个组件 - 分页和表格。当单击分页时，它会向 Box 提供页数。框状态发生变化，然后进行渲染，然后分页也进行渲染。然后我将ajax设置为服务器，获取表的新数据，然后第二次Box渲染以渲染Tables .

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

future <Box/ > 中将会有更多组件这将改变<Tables /> .

Answer 1

据我了解，这是您的设置:

var React = require('react');

var ComponentBox = React.createClass({

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

});

module.exports = ComponentBox;

1. 您的表格组件永远不应该处理数据，您应该将数据“馈送到”您的组件。因此，您的表格组件中应该有一个接收数据的 Prop 。
2. 分页组件应该将一个事件传递给 ComponentBox，告诉 ComponentBox 获取数据 - 因此 ajax 应该在您的 ComponentBox 中发生(如果您愿意，请阅读有关 Flux 的更多信息)

这是为您建议的解决方案

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 =) 传递信息

希望这对您来说足够清楚。