如何在panResponder的release事件中设置State？

Question

在类组件内，我有一个

panResponder

，在

onPanResponderRelease

事件期间，我想更新类组件的状态。然而，在调用 setState 后，状态永远不会更新。

type ExampleState = {
    duration: number
};

class Example extends Component<ExampleProps, ExampleState> {
    constructor(props: ExampleProps) {
        super(props);
        this.state = {
            duration: 0
        };

        this.setupPanResponder();
    }

    setupPanResponder = (): void => {
        this.panResponder = PanResponder.create({
            onPanResponderTerminationRequest: () => false,
            onStartShouldSetPanResponder: () => true,
            onPanResponderGrant: () => {
                // grant code here
            },
            onPanResponderMove: (event, gestureState) => {
                // move code here
            },
            onPanResponderRelease: () => {
                this.setState({ duration: 0 }); // does not seem to actually be setting the state
            }
        });
    };
}

为什么 setState 不起作用？如果我在另一个事件中使用 setState，比如

onPanResponderMove

，它似乎确实有效，这对我来说很奇怪。

Answer 1

我也面临着同样的问题。我解决这个问题的方法如下：

如果 PanResponder 的事件之一依赖于代表组件状态的变量，则每次依赖项更改时（每当调用 this.setState({ dependency: new_value })）时，您都需要重新创建 PanResponder。

这是一个使用函数组件的示例。在这种情况下，如果 onPanResponderRelease 回调发生变化，panResponder 将被重新创建。

const [panResponder, setPanResponder] = useState<PanResponderInstance | null>(null);

useEffect(() => {
 setPanResponder(PanResponder.create({
  onStartShouldSetPanResponder: () => true,
  onPanResponderRelease: onPanResponderRelease
 }));
}, [onPanResponderRelease]);