setState 在 React.js 开始递归工作

Question

我开始使用 react.js 并创建一个组件 Box，state = {pageNumber: 1, dataForTable:''}。我在其中插入了两个组件 - 分页和 Table。单击分页时，它会将页数提供给 Box。盒子状态改变然后渲染，然后分页渲染。然后我将 ajax 设置为服务器，为 table 获取新数据，然后第二次渲染 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;

您的 table 组件不应该处理数据，您应该 "feed" 数据到您的组件。所以你应该在你的 table 组件中有一个接收数据的道具。
分页组件应该向 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 传递信息 =)

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

setState 在 React.js 开始递归工作

setState start to work recursively in React.js

javascript

ajax

pagination

reactjs