Нет доступа к обновленному состоянию или реквизитам внутри onPanResponderMove

Question

Что я пытаюсь сделать: изменить состояние в ответ на смахивание пользователя вверх / вниз. Окружение: 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,

Теперь, При первом срабатывании onMoveShouldSetPanResponder, 'ab c' успешно увеличивается / уменьшается. Самая верхняя консоль в компоненте также показывает новое значение.

Однако после этого в всех последовательных срабатываниях консоль внутри функции onMoveShouldSetPanResponder всегда печатает ab c как 0 (т.е. начальное значение). Это никогда не меняется.

Это то, что мы не можем получить доступ к обновленному состоянию внутри onMoveShouldSetPanResponder? Я что-то упустил или есть другой способ сделать это?

Answer 1

Переменная ab c - это устаревшее закрытие вы можете передать обратный вызов установщику состояния: setabc(currentValue=>currentValue + 1);