Question

const [scrollY] = useState(new Animated.Value(0));
const [scrollYValue, setScrollYValue] = useState(0);

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

目标是实例化一个名为scrollY的Animated.Value并添加一个侦听器，该侦听器会将当前滚动值设置为state。此滚动值scrollYValue在各个组件之间共享，因此它们可以根据用户滚动的距离来执行所需的操作。

如果我删除return scrollY.removeAllListeners();行，那么一切正常，但实际上我确实想在卸载此组件时删除侦听器。

这是我的useEffect依赖项数组不正确的情况吗？似乎立即删除了侦听器，并且scrollY固定为0。

Answer 1

更新：useEffect中的返回值应该是一个函数：

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return () => scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

反应本机使用useEffect钩子删除scrollY侦听器

1 个答案: