我想知道為什么“Hello”只記錄一次，因為 setCounter(1) 會觸發重新渲染，對我來說“Hello”將被記錄兩次。也許與依賴陣列有關？既然沒有通過 props.visible，useEffect() 只會運行一次？
這是我的 CodeSandBox：https ://codesandbox.io/s/peaceful-brattain-hw0mm ? file =/ src/App.js:23-287
任何幫助表示贊賞。
import { useState, useEffect } from "react";
export default function App(props) {
const [counter, setCounter] = useState(0);
useEffect(() => {
console.log("Hello");
setCounter(1);
}, [props.visible]);
return <div className="App">{counter}</div>;
}
uj5u.com熱心網友回復：
的props.visible來自父組件，以便在加入depedecy陣列useEffect如果props.visible變化然后useEffect再次呼叫。
如果您添加counter為依賴陣列并更改counter值，useEffect則會呼叫。
例子 ：
import { useState, useEffect } from "react";
export default function App(props) {
const [counter, setCounter] = useState(0);
useEffect(() => {
console.log("Hello");
}, [counter]);
return (
<div className="App">
{counter}
<button onClick={() => setCounter(counter 1)} > Increment </button>
</div>;
)
}
uj5u.com熱心網友回復：
好吧， props.visible 不會改變，這就是為什么，如果您將 counter 作為 useEffect 的依賴項傳遞，那么您應該看到計數器每次更改時的輸出。（在你的情況下，再一次）
uj5u.com熱心網友回復：
里面的函式useEffect在初始渲染時運行一次，然后每次當依賴陣列中的值發生變化時。如果props.visible不更改，則即使組件由于狀態更改而重新渲染，也不會觸發 useEffect。
uj5u.com熱心網友回復：
您認為依賴陣列是問題的原因是正確的。
如果您在依賴項陣列中提供值，則只有在提供的值發生更改時，react 才會重新渲染。您提供了prop.visible，它不會更新也不會導致重新渲染。
為了使此示例正確，您的代碼需要如下所示：
export default function App(props) {
const [counter, setCounter] = useState(0);
useEffect(() => {
console.log("Hello");
setCounter(1);
}, [counter]);
return <div className="App">{counter}</div>;
}
https://reactjs.org/docs/hooks-effect.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338459.html