React Native react-native-web-swiper useState更新后onPress无最新索引

问题根因 #

这是典型的React Hooks闭包引用陷阱：

• 首次组件渲染时，会生成第一版handleNextButton函数，这个函数的词法作用域直接绑定了初始状态值index = 0
• 轮播切换触发setIndex更新状态时，组件虽然会重新渲染、生成携带最新index的新版回调，但由于子组件OnboardingPage或是轮播库react-native-web-swiper的内部渲染逻辑，缓存了首次传入的回调引用，旧版本的回调始终被保留。点击按钮时执行的永远是绑定了初始index的旧函数，自然读不到更新后的状态。
• 你观察到useEffect、useLayoutEffect能拿到正确的index，是因为这两个Hook在每次状态更新触发重渲染时，会执行新渲染周期内的闭包，和被缓存的按钮回调逻辑完全隔离，不受旧引用影响。

修复方案 #

方案1：用ref同步最新索引值（全场景兼容，最稳妥） #

利用useRef的可变全局引用特性，把最新的index存在ref的current属性上，所有逻辑直接读取ref值，完全避开闭包锁死的问题：

export default ({ navigation, route }: any) => {
  const pages = DataController.getData().onboardingPages;
  const swiper = useRef<Swiper>(null);
  const [index, setIndex] = useState<number>(0);
  // 新增ref存储最新轮播索引
  const indexRef = useRef(0);

  const handleNextButton = () => {
    // 从ref读取最新索引，不再依赖被闭包锁住的state值
    const currentIndex = indexRef.current;
    console.log("INDEX IN BUTTON PRESS", currentIndex);
    if (currentIndex !== pages.length - 1) {
      swiper.current?.goToNext();
    } else {
      navigation.replace("Landing");
    }
  };

  // 每次索引更新时同步刷新ref的值
  useEffect(() => {
    indexRef.current = index;
  }, [index]);

  // 原有导航头部配置逻辑保持不变
  useLayoutEffect(() => {
    if (index !== pages.length - 1) {
      navigation.setOptions({
        headerRight: () => (
          <Text
            style={styles.skip}
            onPress={() => navigation.replace("Landing")}
          >
            Skip
          </Text>
        ),
      });
    } else {
      navigation.setOptions({
        headerRight: undefined,
      });
    }
  }, [index]);

  return (
    <Swiper
      ref={swiper}
      controlsProps={{
        prevTitle: "",
        nextTitle: "",
        prevPos: false,
        nextPos: false,
      }}
      loop={false}
      onIndexChanged={(newIndex) => {
        setIndex(newIndex);
      }}
    >
      {pages.map(item => {
        return (
          <OnboardingPage
            key={item.pageNumber}
            text={item.text}
            image={item.image}
            handleNextButton={handleNextButton}
          />
        );
      })}
    </Swiper>
  );
};

const styles = StyleSheet.create({
  skip: {
    marginRight: 10,
    fontFamily: "an-regular",
    fontSize: 17,
    fontWeight: "normal",
    fontStyle: "normal",
    lineHeight: 26,
    letterSpacing: -0.2,
    color: Colours.P_80,
  },
});

方案2：用useCallback更新回调引用 #

给handleNextButton加上useCallback包裹，把index作为依赖项，保证index变化时回调的引用同步更新，让子组件能感知到prop变化：

const handleNextButton = useCallback(() => {
  console.log("INDEX IN BUTTON PRESS", index);
  if (index !== pages.length - 1) {
    swiper.current?.goToNext();
  } else {
    navigation.replace("Landing");
  }
}, [index, pages.length, navigation]);

注意：如果OnboardingPage是被React.memo包裹的纯组件，这个方案才能生效；如果是轮播组件本身缓存了子元素引用，优先选择方案1的ref实现，兼容所有场景。

内容的提问来源于stack exchange，提问作者BobSacamano