如何有條件地或在 function 內部運行 React 自定義掛鈎

Question

我有一個自定義掛鈎來將用戶重定向到編輯頁面。 在索引頁上，我可以復制項目並刪除。 我可以在復制后重定向用戶，但問題是當我刪除一個項目時，這個自定義掛鈎將用戶重定向到再次編輯頁面。 所以我需要找到一種方法讓它有條件地工作。

自定義掛鈎：

export default function useDuplicateItem(url: string) {
  const { sendRequest: duplicate } = useHttpRequest();

  const duplicateItem = useCallback(
    (data) => {
      duplicate([
        {
          url: `/api/server/${url}`,
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          data,
        },
      ]);
    },
    [duplicate, url]
  );
  useRedirectEditPage(url); // This causes the problem
  return duplicateItem;
}

索引頁：

 const duplicateItem = useDuplicateItem('documents'); 
// custom hook rendered here, which is not correct. I want to run it when duplicate function runs.
    
      const duplicate = useCallback(() => {
        const data = {
          name: copiedName,
          sources: singleDocument?.sources,
          document: singleDocument?.document,
          tool: singleDocument?.tool,
          access: singleDocument?.access,
        };
        duplicateItem(data);
      }, [copiedName, duplicateItem, singleDocument]);

使用重定向編輯頁面：

export default function useRedirectEditPage(slug: string) {
  const { saveResponses, setSaveResponses, setHeaderStates } =
    useAdminContext();
  const router = useRouter();

  useEffect(() => {
    const statusCodes: number[] = [];
    let id;

    saveResponses.forEach((value) => {
      statusCodes.push(value?.status);
      id = value?.id;
    });

    if (statusCodes.length && id) {
      if (statusCodes.includes(404)) {
        setHeaderStates((prev) => ({
          ...prev,
          canBeSaved: false,
        }));
      } else {
        router.push(`/admin/${slug}/edit/${id}`);
        setSaveResponses(new Map());
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [saveResponses, router, setSaveResponses]);
}

saveResponses state 在我向服務器發出任何請求后出現，並且我能夠獲取id以重定向用戶。 我使用new Map()在 saveResponses 中set數據。

Answer 1

從反應文檔：

不要在循環、條件或嵌套函數中調用 Hooks。 相反，在任何早期返回之前，始終在 React function 的頂層使用 Hooks。 通過遵循此規則，您可以確保每次組件呈現時都以相同的順序調用 Hook。 這就是讓 React 在多個 useState 和 useEffect 調用之間正確保留 Hooks 的 state 的原因。 （如果你很好奇，我們將在下面深入解釋這一點。）

React 依賴於調用 Hooks 的順序來知道哪個setState對應於哪個state ，在條件內調用它們會打亂之前的機制。

我建議閱讀以下內容： https://reactjs.org/docs/hooks-rules.html#explanation