I'm trying to convert a React class component into a React function component.
There is aonChangefunction that can be called inside and outside the component. TheuseStatehook gets the initial value when the function component function is called. When I use the old class component way everything works fine. Why does this happen and how to solve it?
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 } }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem is that
onChangeis an obsolete closure. What you need to do is makeonChangelook like this:const onChange = (event) => { setTest(oldTest => oldTest +1) }Alternatively, you can add
testto the dependencies array inuseEffect, but make sure to clean it up. (You should do this anyway, but it’s more important now)useEffect(() => { someLib && someLib.addCallback(onChange); return () => { someLib.removeCallback(onChange); } }, [someLib, test]);Technically, if you are doing the latter approach, you need to
useCallbackconst onChange = useCallback((event) => { setTest(test + 1); }, [test]); useEffect(() => { someLib && someLib.addCallback(onChange); return () => { someLib.removeCallback(onChange); } }, [someLib, onChange]);The advantage of this is that you don't have to track
onChange's dependencies in different places. The dependency list foronChangeis now closed.