React Hook useCallback 缺少依賴項：“dir”、“order”、“page”、“perPage”和“search”

Question

我的代碼：看起來像

  //GLOBAL STATE INITIALIZATION
  const page = useSelector((state) => state.users.meta.page);
  const perPage = useSelector((state) => state.users.meta.perPage);
  const order = useSelector((state) => state.users.meta.order);
  const dir = useSelector((state) => state.users.meta.dir);
  const search = useSelector((state) => state.users.meta.search);

  // FUNCTIONS
  const fetchData = useCallback(
    (
      pageNumber = page,
      pageSize = perPage,
      columnOrder = order,
      colDir = dir,
      query = search
    ) => {
      dispatch(
        listUser(pageNumber, pageSize, columnOrder, colDir, searchColArr, query)
      );
    },
    [searchColArr, dispatch]
  );
  //throwing warning above for missing dependencies


  useEffect(() => {
    dispatch(resetState(function () {}));
    fetchData();
  }, [dispatch, fetchData]);

在這里，如果我添加缺少的依賴項並將[searchColArr, dispatch]替換為[page, perPage, order, dir, searchColArr, search, dispatch]那么程序將無限循環運行。 因為，在listUser操作上它調度

dispatch(
  userActions.USER_LIST_SUCCESS({
    list: data.data,
    meta: data.meta,
  })
);

這個USER_LIST_SUCCESS將更新 redux 狀態為：

USER_LIST_SUCCESS: (state, action) => {
  state.list = action.payload.list;
  state.meta = action.payload.meta;
  state.isLoading = false;
},

一旦這個元狀態得到更新， page, perPage, order, dir, search也將被更新，如果我將這些作為依賴項添加，它會再次獲取數據，在獲取數據時它會更新元狀態，並以這種方式形成無限循環。

這種情況的最佳解決方案是什么？ 或者eslint-disable-line react-hooks/exhaustive-deps是唯一的選擇？

更新：LISTUSER

import user from "../../services/userService";
export const listUser =
  (page, perPage, order, dir, searchCol, search) => async (dispatch) => {
  try {
    dispatch(
      userActions.SET_IS_LOADING({
        isLoading: true,
      })
    );
    const { data } = await user.listUser(
      page,
      perPage,
      order,
      dir,
      searchCol,
      search
    );
    dispatch(
      userActions.USER_LIST_SUCCESS({
        list: data.data,
        meta: data.meta,
      })
    );
  } catch (error) {
    toastify.error(error.response.data.message);
    dispatch(
      userActions.USER_LIST_FAIL({
        errors:
          error.response && error.response.data.errors
            ? error.response.data.errors
            : error.response.data,
      })
    );
  }
};

用戶列表用戶

export async function listUser(
  page,
  perPage,
  order,
  dir,
  searchColArr,
  search
) {
  let searchCol = JSON.stringify(searchColArr);
  return httpClient.get(apiEndpoint, {
    params: {
      page,
      perPage,
      order,
      dir,
      searchCol,
      search,
    },
  });
}

更新2

const handlePageChange = (pageNumber) => {
  fetchData(pageNumber);
};

const handlePageLengthChange = (pageSize) => {
  fetchData(null, pageSize);
};

const handleSort = (newOrder, newDir) => {
  fetchData(null, null, newOrder, newDir);
};

Answer 1

我有一個解決方案。 您不會將page, perPage, order, dir, search傳遞到listUser 。 只需通過 searchCol。 另一個參數將進入listUser 。 你可以這樣更新：

  const fetchData = useCallback(() => {
    dispatch(listUser(searchColArr));
  }, [searchColArr, dispatch])

export const listUser =
  ( searchCol ) => async (dispatch, getState) => {
  try {
    dispatch(
      userActions.SET_IS_LOADING({
        isLoading: true,
      })
    );
    const page = getState((state) => state.users.meta.page);
    const perPage = getState((state) => state.users.meta.perPage);
    const order = getState((state) => state.users.meta.order);
    const dir = getState((state) => state.users.meta.dir);
    const search = getState((state) => state.users.meta.search);
    const { data } = await user.listUser(
      page,
      perPage,
      order,
      dir,
      searchCol,
      search
    );
    dispatch(
      userActions.USER_LIST_SUCCESS({
        list: data.data,
        meta: data.meta,
      })
    );
  } catch (error) {
    toastify.error(error.response.data.message);
    dispatch(
      userActions.USER_LIST_FAIL({
        errors:
          error.response && error.response.data.errors
            ? error.response.data.errors
            : error.response.data,
      })
    );
  }
};

更新：如果您仍然想傳遞其他參數，您可以檢查以獲取數據。

listUser = (page, perPage, order, dir, searchCol, search) => async (dispatch, getState) => {
  const page = page || getState((state) => state.users.meta.page);
  ...
};