Question

我正在为一个功能工作，我必须在使用react-table的组件外部应用过滤器，但是在应用过滤器后，当前页码不会重置。提取的结果（已应用服务器端分页）显示了第一页的数据。

我尝试使用回调onFetchData更改当前页码，但是当应用来自组件外部的过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

页码应重设为1，例如当前显示为第2页，共3页，应用了表格外部的过滤器后，将获取并显示结果，但是当表格中的结果为第1页时，第2页，共3页没有变化。

Answer 1

在我的反应表中，在解决方案中，我在componentWillReceiveProps方法中遇到了同样的问题，我更新了反应表的页面属性，并在反应表获取新的过滤数据时将其设置为“ 0”（道具更改了），对我来说工作正常，因此当您的表从父级获取新数据时，只需在代码中将页面道具设置为0

private void GetThumbnail(IFormFile file)
{
        var fileName = CreateEmployeeViewModel.Video.FileName;
        var webRootPath = _webHostEnvironment.WebRootPath;
        var filePath = Path.Combine(webRootPath, "videos", fileName);

        var fileExtension = Path.GetExtension(filePath);
        var thumbnailImageName = fileName.Replace(fileExtension, ".jpg");
        var thumbnailImagePath = Path.Combine(webRootPath, "thumbnails", thumbnailImageName);

        ProcessStartInfo startInfo = new ProcessStartInfo();

        string arguments = $"-i {filePath} -ss 00:00:14.435 -vframes 1 {thumbnailImagePath}";

        startInfo.FileName = Path.Combine(Directory.GetCurrentDirectory(), "Ffmpeg\\ffmpeg.exe");
        startInfo.CreateNoWindow = false;
        startInfo.UseShellExecute = false;
        startInfo.RedirectStandardError = true;
        startInfo.RedirectStandardOutput = true;
        startInfo.WindowStyle = ProcessWindowStyle.Hidden;
        startInfo.Arguments = arguments;

        try
        {
            Process process = Process.Start(startInfo);
            process.WaitForExit(5000);
            process.Close();
        }
        catch
        {
            // Log error.
        }

}

Answer 2

此问题可以通过以下TroyWolf's solution中的hacky解决方案来解决。并在那里阅读整篇文章-可能是您当前的案子在另一条评论中。如果该帖子将以某种方式删除，我将其发布在这里：

存储对ReactTable实例的引用。它可以直接更新myReactTableInstance.state.page = 0

Answer 3

在类似的用例中，我发现最好使用曾经自己的受控页面状态进行索引，如下所述：

Check here as mentioned in the docs

处理自定义过滤/自定义排序中的页面重置操作并相应触发

Answer 4

设置autoResetPage: false https://react-table.tanstack.com/docs/api/usePagination#table-options

它会一直避免渲染。

如何解决反应表中的分页重置问题？

4 个答案: