為什么 useFetcher 會導致重新渲染無限循環？

Question

我有一個輸入。 在每次更改輸入時，我都想調用一個 API。

這是代碼的簡化版本：

  // updated by input
  const [urlText, setUrlText] = useState("");

  const fetcher = useFetcher();

  useEffect(() => {
    if (urlText === "" || !fetcher) return;
    fetcher.load(`/api/preview?url=${urlText}`);
  }, [urlText]);

問題是，當我將urlText放在依賴項數組中時，會出現無限渲染循環，而 React 聲稱問題是我可能正在更新useEffect內部的狀態。 但是，據我所知，我沒有更新鈎子內的任何狀態，所以我不確定為什么會發生無限重新渲染。

有什么想法嗎？

代碼的完整版本是：

注意：在沒有去抖動或useMemo的情況下，該錯誤仍然會發生，所有這些內容大致無關緊要。

export default function () {
  const { code, higlightedCode } = useLoaderData<API>();

  const [urlText, setUrlText] = useState("");
  const url = useMemo(() => getURL(prefixWithHttps(urlText)), [urlText]);
  const debouncedUrl = useDebounce(url, 250);

  const fetcher = useFetcher();

  useEffect(() => {
    if (url === null || !fetcher) return;
    fetcher.load(`/api/preview?url=${encodeURIComponent(url.toString())}`);
  }, [debouncedUrl]);

  return (
             <input
            type="text"
            placeholder="Paste URL"
            className={clsx(
              "w-full rounded-sm bg-gray-800 text-white text-center placeholder:text-white"
              //"placeholder:text-left text-left"
            )}
            value={urlText}
            onChange={(e) => setUrlText(e.target.value)}
          ></input>
  );
}

Answer 1

您可以通過在useFetcher鈎子中設置狀態，請從useFetcher檢查load方法的代碼。

Answer 2

您遇到的問題是 fetcher 在整個提取過程中都會更新。 這導致您的效果重新運行，並且由於您再次調用load ，它正在重復循環。

您應該檢查fetcher.state以查看何時獲取。

useEffect(() => {
  // check to see if you haven't fetched yet
  // and we haven't received the data
  if (fetcher.state === 'idle' && !fetcher.data) {
    fetcher.load(url)
  }
}, [url, fetcher.state, fetcher.data])

https://remix.run/docs/en/v1/api/remix#usefetcher

Answer 3

更新：我很傻。 useDebounce返回一個數組。