在第三方库中调用状态设置器时如何防止状态重置

Question

我正在尝试将 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 
  }
}

Answer 1

问题是 onChange 是一个过时的闭包。您需要做的是使 onChange 看起来像这样：

const onChange = (event) => {
    setTest(oldTest => oldTest +1)
}

或者，您可以将 test 添加到 useEffect 中的依赖项数组中，但请确保进行清理。 （无论如何你都应该这样做，但现在更重要）

useEffect(() => {
    someLib && someLib.addCallback(onChange);

    return () => {
        someLib.removeCallback(onChange);
    }
}, [someLib, test]);

从技术上讲，如果您正在执行后一种方法，您需要useCallback

const onChange = useCallback((event) => {
    setTest(test + 1);
}, [test]);

useEffect(() => {
    someLib && someLib.addCallback(onChange);

    return () => {
        someLib.removeCallback(onChange);
    }
}, [someLib, onChange]);

这样做的好处是您不必在不同的地方跟踪 onChange 的依赖项。 onChange 的依赖项列表现已关闭。