react-native - 使用未定义状态响应本机 PanResponder 函数调用

Question

我目前正在 React Native 中构建一副刷卡牌。我对顶部卡片使用 AnimatedView，然后对下面的卡片使用常规视图，通过更改存储在状态中的卡片列表来更改顶部卡片。有两个按钮也可用于刷卡，这些按钮按预期工作，函数被调用并按预期运行，但是当调用来自 panresponder 时，卡片列表未定义。

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
  );