无法访问 onPanResponderMove 内的更新状态或道具答案

【问题标题】：Cannot access updated state or props inside onPanResponderMove无法访问 onPanResponderMove 内的更新状态或道具
【发布时间】：2020-10-09 13:57:56
【问题描述】：

我想要做什么：更改状态以响应用户的向上/向下滑动。环境：React Native 0.61.5

我的组件如下。

import React, { useRef, useState } from 'react';
import { View, PanResponder } from 'react-native';

function SimpleWrapper(props) {
  const { children } = props;

  const [abc, setabc] = useState(0);

  console.log('SimpleWrapper', abc);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
      // onStartShouldSetPanResponderCapture: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
      onMoveShouldSetPanResponder: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
      // onMoveShouldSetPanResponderCapture: (evt, gestureState) => handleShouldSetPanResponder(evt, gestureState),
      // onPanResponderGrant: (evt, gestureState) => console.log('onPanResponderGrant', gestureState),
      onPanResponderMove: (evt, gestureState) => handleonPanResponderMove(evt, gestureState),
      onPanResponderTerminationRequest: () => {}
      // onPanResponderRelease: (evt, gestureState) => handlePanResponderRelease(evt, gestureState)
    })
  ).current;

  const handleShouldSetPanResponder = (evt, gestureState) => {
    const { dy } = gestureState;
    const isvalid = evt.nativeEvent.touches.length === 1 && Math.abs(dy) > gestureConfig.gestureIsClickThreshold;
    return isvalid;
  };

  const handleonPanResponderMove = (evt, gestureState) => {
    const { dy, vy } = gestureState;
    console.log('in handleonPanResponderMove:', abc, gestureState);
    if (dy < 0) {
      setabc(abc + 1);
    } else if (dy > 0) {
      setabc(abc - 1);
    }
    // }
  };

  return (
    <View {...panResponder.panHandlers} style={}>
      {children}
    </View>
  );
}

export default SimpleWrapper;

基本上我想增加/减少 onMoveShouldSetPanResponder 中的 state 参数，

现在，在 onMoveShouldSetPanResponder 第一次触发时，“abc”成功递增/递减。组件中最顶层的控制台也显示了新值。

然而，之后，在 all 连续触发中，onMoveShouldSetPanResponder 函数内的控制台始终将 abc 打印为 0（即初始值）。它永远不会改变。

是不是我们无法访问 onMoveShouldSetPanResponder 内部的更新状态？我错过了什么还是有其他方法可以做到这一点？

【问题讨论】：

您是否尝试将日志放在 if 或 else if 中？
@aravind_reddy 是的，试过了，同样的事情。只打印初始值

标签： reactjs react-native gesture use-state panresponder

【解决方案1】：

abc 变量是 stale closure，您可以将回调传递给状态设置器：setabc(currentValue=>currentValue + 1);

【讨论】：