我有一個 useEffect 掛鉤，我想在每次依賴項success更改時運行它。我的想法是將依賴項放在我認為正確的陣列中。
但是，此效果會在組件安裝時運行。我已經讀過我可以使用 ref 來幫助我解決這個問題，但我似乎無法實作它并且組件仍然呈現。任何想法？
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) {
fetchData();
} else {
isMounted.current = true;
}
}, [success]);
uj5u.com熱心網友回復：
您提供的代碼似乎沒問題，并向控制臺提供“已啟動、安裝、已啟動、已安裝”。
function App() {
const [success, setSuccess] = useState(false);
const isMounted = useRef(false);
useEffect(() => {
console.log('started');
if (isMounted.current) {
console.log('mounted');
} else {
console.log('mounting');
isMounted.current = true;
}
}, [success]);
const handleClick = (e) => {
setSuccess(!success);
}
return (
<div className="App">
<header className="App-header">
<button className="button" onClick={handleClick}>Action</button>
</header>
</div>
);
}
uj5u.com熱心網友回復：
如果您的組件被包裹在 React.StrictMode 中，則fire -> cleanup -> fire每次開發時都會產生效果，以確保沒有任何東西沒有被正確清理。您可以嘗試禁用 StrictMode（因為它無論如何都不會在生產中運行）并查看問題是否仍然存在。
一般的 React 指導只是接受資料獲取之類的事情將在開發中運行兩次（或者試圖避免在第一次渲染時運行，一次而不是零次）。
有關更多資訊，請參閱https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects。
https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development也討論了一些常見的場景以及如何處理它們，雖然我認為你的答案就是讓它在開發中發生。
uj5u.com熱心網友回復：
您能否發布組件的完整代碼以確保沒有任何運行？
這是您提供的代碼的作業示例（假設這是您想要的）：
https://codesandbox.io/s/example-ts882o?file=/src/App.js
import React, { useState } from "react";
function fetchData() {
console.log("fetching");
}
export default function App() {
const isMounted = React.useRef(false);
const [success, setSuccess] = useState(true);
React.useEffect(() => {
if (isMounted.current) {
fetchData();
} else {
isMounted.current = true;
}
}, [success]);
return (
<div>
<button
onClick={() => setSuccess(!success)}
style={{ backgroundColor: success ? "green" : "red" }}
>
toggle change
</button>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/497009.html
標籤：反应