我在反應組件中有這個 useEffect 功能。我在videoGridState這里呼叫api。現在這里發生的事情是在初始頁面重新加載時呼叫我的 api 2 次，當計數發生變化時呼叫我的 api 2 次。我希望它在頁面重新加載時被單次呼叫。但也當streamSearchText變化
const [count, setCount] = useState(0);
const [streamSearchText, setStreamSearchText] = useState("");
useEffect(() => {
videoGridState();
}, [count]);
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
setCount(count 1);
}, 1000);
return () => clearTimeout(delayDebounceFn);
}, [streamSearchText]);
我怎樣才能做到這一點？
uj5u.com熱心網友回復：
問題是您有兩個 useEffect呼叫，因此每個呼叫都被處理，第二個觸發第一個（延遲后），導致重復。
據我了解，您的目標是：
- 在安裝時
videoGridState立即運行，并且 streamSearchText每次更改時延遲 1000 毫秒后再次運行它
事實證明，這樣做非常尷尬。我可能最終會使用 ref ：
const firstRef = useRef(true);
const [streamSearchText, setStreamSearchText] = useState("");
useEffect(() => {
if (firstRef.current) {
// Mount
videoGridState();
firstRef.current = false;
} else {
// `streamSearchText` change
const timer = setTimeout(() => {
videoGridState();
}, 1000);
return () => clearTimeout(timer);
}
}, [streamSearchText]);
現場示例：
顯示代碼片段
const { useState, useRef, useEffect } = React;
function videoGridState() {
console.log("videoGridState ran");
}
const Example = () => {
const firstRef = useRef(true);
const [streamSearchText, setStreamSearchText] = useState("");
useEffect(() => {
if (firstRef.current) {
// Mount
videoGridState();
firstRef.current = false;
} else {
// `streamSearchText` change
const timer = setTimeout(() => {
videoGridState();
}, 1000);
return () => clearTimeout(timer);
}
}, [streamSearchText]);
return <div>
<label>
Search text:{" "}
<input
type="text"
value={streamSearchText}
onChange={(e) => setStreamSearchText(e.currentTarget.value)}
/>
</label>
</div>;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>您也可以在streamSearchTextis時立即進行查詢，但每次""is都會發生這種情況，而不僅僅是在掛載時。這可能已經足夠好了，這取決于您需要多么嚴格。 streamSearchText""
uj5u.com熱心網友回復：
您的以下useEffect()功能使這種行為發生：
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
setCount(count 1);
}, 1000);
return () => clearTimeout(delayDebounceFn);
}, [streamSearchText]);
因為它最初運行但被呼叫setCount()更新狀態，并強制重新渲染組件，該組件又運行第一個useEffect()，因為它[count]在依賴陣列中。
因此回圈繼續[count]
uj5u.com熱心網友回復：
將依賴項陣列留空以使其運行一次。
useEffect(() => {
videoGridState();
}, [count]); /* Remove the count
variable, leave the array empty.*/
這樣，您的 api 只會在頁面加載時被獲取一次。
更多關于 useEffect 依賴陣列useEffect 依賴陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/491806.html
標籤：javascript 反应