我有一個輸入。在每次更改輸入時，我都想呼叫一個 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>
);
}
uj5u.com熱心網友回復：
您可以通過在 useFetcher 鉤子中設定狀態，請從 useFetcher 檢查加載方法的代碼。
uj5u.com熱心網友回復：
我認為這是因為 useEffect 會回圈直到 urlText 中有內容，即使你放一個“if”來檢查它是否為空。
這是一種可能
uj5u.com熱心網友回復：
更新：我很傻。useDebounce回傳一個陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486422.html
標籤：javascript 反应 混音运行