为啥 PanResponder 不能使用 useEffect Hook？

Posted 2023-03-16

【中文标题】为啥 PanResponder 不能使用 useEffect Hook？

【英文标题】：Why PanResponder is not working with useEffect Hook?为什么 PanResponder 不能使用 useEffect Hook？

【发布时间】：2021-05-11 06:22:52

【问题描述】：

我正在尝试使用 useEffect 找到 ComponentWillMount 方法的替代品。但是 panresponder 变量不是在初始渲染之前创建的。 谁能告诉我我在这里做的任何错误？没有 useEffect，页面将被渲染。未捕获手势。

      const makeup = () => 
        useEffect(() => 
            console.log('I am about to render!');
            const panResponder = useRef(
              PanResponder.create(
                onStartShouldSetPanResponder: (e, gestureState) => true,
                onPanResponderMove: (e, gestureState) => ....,
                onPanResponderRelease: (e, gestaureState) => ....
              ));
          ,[]);

        return ARTICLES.map((item, i) => 
          console.log("Makeup i:"+i+" item:"+item);
          if (i === index.currentIndex - 1) 
            return (
              <Animated.View
                key=item.id
                style=swipeCardPosition.getLayout()
                ...panResponder.panHandlers
              >
                  
              </Animated.View>
            );
          
          if (i < index.currentIndex) 
            return null;
          
          return (
            <Animated.View
              key=item.id
              style=index.currentIndex === i ? position.getLayout() : null
              ...(index.currentIndex === i
                ?  ...panResponder.panHandlers 
                : null)
>
            </Animated.View>
          );
        ).reverse();
      ;



[Error on execution][1]


  [1]: https://i.stack.imgur.com/sls5E.png

【问题讨论】：

您将 panResponder 存储在 useRef 中，您应该检查其上的属性 current 然后传播它，现在 panResponder.panHandlers 甚至不存在。应该是panResponder.current.panHandlers

感谢您检查@Konstantin！。以下解决方案有效。

【参考方案1】：

Check the official docs. 它描述了如何将PanResponder 与功能组件一起使用。

例如：

const ExampleComponent = () => 
  const panResponder = React.useRef(
    PanResponder.create(
      onStartShouldSetPanResponder: (e, gestureState) => true,
      onPanResponderMove: (e, gestureState) => ....,
      onPanResponderRelease: (e, gestaureState) => ....
    )
  ).current;

  return <View ...panResponder.panHandlers />;
;

由于多种原因，您的示例无法正常工作，最明显的是因为您can't call useRef inside useEffect。

【讨论】：

感谢@ivanmoskalev 的解决方案。将 Panresponder 移出 useEffect 后，它起作用了。