Реакция собственных вызовов функций PanResponder с использованием неопределенного состояния

Question

В настоящее время я собираю колоду карт в React Native. Я использую AnimatedView для верхней карты, а затем обычные виды для карт внизу, меняя верхнюю карту, изменяя список карт, хранящихся в состоянии. Есть две кнопки, которые также могут использоваться для считывания карточек, и эти кнопки работают так, как и предполагалось, функция вызывается и работает, как и ожидалось, однако, когда вызов поступает от оператора, список карточек не определен.

Упрощенная версия panResponder.

const [cards, setCards] = useState([])

useEffect(() => {/*a fetch that collects cards*/ setCards(fetchResult)})

const panResponder = React.useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
          let y = gestureState.dy;
          console.log(evt)
          console.log(gestureState)
          if (condition) {
            rate(false);
        }
      }),
    []
  );

Answer 1

Проблема в том, что panResponder создается при первоначальной загрузке компонента, поэтому cards[] пусто. Вам нужно чтобы panResponder подписывался на обновления в массиве карт, чтобы гарантировать, что функция тарификации использует текущий массив карт.

Что-то такое простое, как это должно работать.

const panResponder = React.useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
          let y = gestureState.dy;
          console.log(evt)
          console.log(gestureState)
          if (condition) {
            rate(false);
        }
      }),
    [cards] // Refresh when cards array changes
  );