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

setState start to work recursively in React.js

本文关键字：递归 工作 js React 开始 setState      更新时间：2023-09-26

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

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

将来会有更多的组件在<Box/ >这将改变<Tables />。

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

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 on PageChange 传递信息=）

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

相关文章：