Question

我正在将React Table与Redux一起使用，并且有一个名为fetchData的函数，其中调度了FETCH_DATA操作。

GetParameters()返回带有搜索查询，日期过滤器和其他过滤器的对象。每当我更改页面或通过页面过滤器更改项目时，都会触发fetchData。它不会重新执行getParameters()。它仅从fetchData的参数（pageSize，pageIndex）中获取更改，而不从状态中获取更改。

我知道useCallback正在记忆，但仍然找不到解决方法

const getParameters = () => {
  return { query: searchQuery, employee, ...daysToExpireFilter };
};
const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
  setPageSize(pageSize);
  setPageIndex(pageIndex);
  dispatch({
    type: FETCH_DOCUMENTS,
    payload: agent.document.all(pageIndex + 1, pageSize, getParameters())
  });
  //eslint-disable-next-line
}, []);

Answer 1

我不得不修改 useCallback 的输入参数来添加状态 customState。（这里是GetParameters）。

const fetchData = React.useCallback(({ pageSize, pageIndex, customState }) => { }

然后在 Table 组件的父方法中，添加新参数。

// Listen for changes in pagination and use the state to fetch our new data
React.useEffect(() => {
    fetchData({ pageIndex, pageSize, customState })
}, [fetchData, pageIndex, pageSize])

不要将它添加到 ',pageSize]' 之后的第二个参数中（否则，它会在每次 customState 更改时调用 fetchData）。然后将其作为新参数添加到同一个 Table 组件中。

function Table({
  customState,
  ...
})

使用useCallback反应表的fetchData

1 个答案: