我正在尝试将 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看起来像这样：const onChange = (event) => { setTest(oldTest => oldTest +1) }或者，您可以将
test添加到useEffect中的依赖项数组中，但请确保进行清理。 （无论如何你都应该这样做，但现在更重要）useEffect(() => { someLib && someLib.addCallback(onChange); return () => { someLib.removeCallback(onChange); } }, [someLib, test]);从技术上讲，如果您正在执行后一种方法，您需要
useCallbackconst onChange = useCallback((event) => { setTest(test + 1); }, [test]); useEffect(() => { someLib && someLib.addCallback(onChange); return () => { someLib.removeCallback(onChange); } }, [someLib, onChange]);这样做的好处是您不必在不同的地方跟踪
onChange的依赖项。onChange的依赖项列表现已关闭。