Question

我的反应应用程序上的分页问题。每次我点击下一步，状态将从帐户[20]变为有帐户[40]。我在我的应用程序的根目录中设置了loadData函数，因此当用户单击下一步时，它将更新状态。示例：

loadData: function(pageNumber) {
        this.state.accounts = null;
        this.setState({
            accounts: this.getFlux().actions.loadAccounts(pageNumber)
        });
    },

因此，每次递增时，它将从API获取下一个20或前20个记录。

我设置记录的方式是这样的：

数据库反应组件渲染部分：

 return (
                <div className='container'>
                    <h1 className='data-table__title'>Database</h1>
                <table className='data-table'>
                    <tbody>
                    <tr className='data-table__row--top'>
                        {columnTitles.map(this.renderTitles)}
                    </tr>



         {loading ? this.renderLoading() : accounts.map(this.renderAccounts)}

                {this.renderLoading}
                </tbody>
            </table>
            <Pagination updateData={this.props.loadData} totalPages={totalPages}/>
        </div>
    );

将在其中调用此函数

renderAccounts : function (accounts, index) {
        return (
            <AccountsTable data={accounts}/>
        );
    },

AccountTable组件只使用foreach组件的数据对象循环组件。

每次点击下一个或上一个时，如何清除旧内容并将其替换为新记录？

谢谢

Answer 1

您的问题可能是由于当您请求新页面时Flux商店本身未被清除。以下是一些选项：

在收到loadAccounts操作时清除商店。
仅返回loadAccounts动作创建者中所请求页面的帐户。例如，您的帐户可能有page属性，您可以filter。

您的loadAccounts动作创建者可能只是返回错误的数据。我会看那里，看看它回来了什么。

顺便说一下，这行代码：

this.state.accounts = null;

没有必要，实际上是个坏主意。当您希望更改状态时，应始终使用setState，并且不要直接改变this.state。在任何情况下，您的后续setState调用都会覆盖它，即使它有效。

Answer 2

我不知道你正在使用哪种通量，但模式应该是按钮点击下一页调用clickHandler调用nextPage动作，该动作在商店中有一个监听器，它设置currentPage数据并触发组件监听的事件并获取currentPage数据，然后获取setState。

通过数据

2 个答案: