Question

我在我的项目中使用react-table。不知道为什么反应表的onFetchData方法被调用两次。

我将defaultFiltered设置为

     defaultFiltered={[
          {
            id: 'status',
            value: this.getFilterValue(),
          }
      ]}

和我的OnFetchData方法如下：

onFetchData = (props) => { this.request = this.getData(props); }

react-table部分如下：

<ReactTable
      manual
      minRows = {1}
      getTdProps={this.onRowClick}
      onFetchData={this.onFetchData}
      data={!loading ? comparison.results : []}
      sortable={true}
      defaultSorted={[{
        id: 'deviation',
        desc: true,
      }]}
      filterable={showfilter === 1}
      defaultFiltered={[{
        id: 'status',
        value: this.props.statusFilter,
      }]}
      showPagination = {true}
      pages={comparison.metadata.totalPages}
      showPageSizeOptions = {true}
      pageSizeOptions = {[10, 15, 20, 25, 50, 100]}
      defaultPageSize={10}
      columns={this.getColumns}
 />

Answer 1

我的解决方案是：声明一个fetchData状态：

const [fetchState, setFetchState] = useState(null);

执行深层相等比较，以避免多次操作调用

onFetchData={useCallback(({ page: nextPage, pageSize, sorted }) => {
      const nextFetch = { page: nextPage, pageSize, sorted };
      const prevFetch = fetchState;

      if (!deepEqual(nextFetch, prevFetch)) {
        setFetchState(nextFetch);
        onFetchData(nextFetch);
      }
    }, [fetchState, setFetchState])}

为了方便起见，我还发布了deepEqual定义：

const deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

React-table onFetchData被触发两次

1 个答案: