我正在嘗試將 React 類別元件轉換為 React 函數元件。
有一個 onChange
函數,可以在元件內部和外部呼叫。
當呼叫函數元件函數時,useState
掛鉤會取得初始值。當我使用舊的類組件方式時,一切正常。為什麼會出現這種情況,如何解決這個問題?
const MyInput = (props) => { const { someLib, ...otherProps } = props; const [test, setTest] = useState(1); // console show 1,2,3, etc useEffect(() => { someLib && someLib.addCallback(onChange); }, []); const onChange = (event) => { setTest(test + 1) // this function can called inside MyInput, and from someLib, // when it called from someLib, 'test' is reset, but in class component everything good } }
問題是
onChange
是一個過時的閉包。您需要做的是讓onChange
看起來像這樣:或者,您可以將
test
新增到useEffect
中的依賴項陣列中,但請確保進行清理。 (無論如何你都應該這樣做,但現在更重要)從技術上講,如果您正在執行後一種方法,您需要
#useCallback
這樣做的好處是您不必在不同的地方追蹤
onChange
的依賴項。onChange
的相依性列表現已關閉。