我是 React 的新手，并試圖制作一個加載/問候頁面，在顯示幾秒鐘后導航到下一個頁面。在 React Router v6 中，我們有useNavigate()允許您控制導航的鉤子，我正在使用它通過在useEffect()鉤子中設定超時來成功呼叫導航函式。但是，編譯器抱怨我缺少依賴項。我只希望它運行一次，而不是每當navigate發生變化時。做這個的最好方式是什么？
謝謝！
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
function Greeting(props) {
const navigate = useNavigate();
useEffect(() => {
setTimeout(() => navigate(props.nextPage), 3000);
}, []);
return (
<div className="Greeting">
<div>Hello World!</div>
</div>
);
}
export default Greeting;
第 9:6 行：React Hook useEffect 缺少依賴項：'navigate'。要么包含它，要么移除依賴陣列 react-hooks/exhaustive-deps
uj5u.com熱心網友回復：
該useEffect鉤子缺少依賴項，包括navigate函式和props.nextPage回呼中參考的依賴項。將它們添加到依賴陣列。如果組件在超時自行到期之前卸載，請不要忘記回傳清理函式。
useEffect(() => {
const timerId = setTimeout(() => navigate(props.nextPage), 3000);
return () => clearTimeout(timerId);
}, [navigate, props.nextPage]);
作為一般規則，您應該遵循 linter 的所有指導。該react-hooks/exhaustive-deps規則可以幫助您撰寫更好的代碼。不要禁用該行的規則，除非您絕對知道自己在做什么以及如果/當??您更新回呼邏輯并可能更改依賴項時可能會出現的未來后果。
uj5u.com熱心網友回復：
您可以通過添加以下內容來隱藏此警告：
useEffect(() => {
setTimeout(() => navigate(props.nextPage), 3000);
// eslint-disable-next-line
}, []);
此警告由 eslint 規則顯示。您可以在How to fix missing dependency warning when using useEffect React Hook
uj5u.com熱心網友回復：
由于navigate實際上是一個依賴項，只需將其添加到依賴項陣列（useEffect() 掛鉤中的第二個引數）
不用擔心，該功能仍將在掛載時運行，這是一個足夠安全的賭注，navigate不會改變并導致不需要的 2ndsetTimeout
為了真正安全起見，您實際上可以輸入代碼以確保 setTimeout 只運行一次，但無論如何它都是矯枉過正的
uj5u.com熱心網友回復：
根據您希望如何設定專案的結構，您可以使用 useRef 掛鉤來消除 useNavigate 掛鉤所需的依賴關系。或者您可以將其添加到依賴項陣列中。這是一個這樣做的例子。
const navigate = useRef(useNavigate());
useEffect(() => {
const timeout = setTimeout(() => navigate.current(props.nextPage), 3000);
return () => {
clearTimeout(timeout);
};
}, [props.nextPage]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507993.html
標籤：javascript 反应 反应钩子 反应路由器 反应路由器dom
上一篇：使用js的html表格