React Native自定义useScreenSeq钩子index被重置无法切换多屏幕如何解决

• 核心是闭包陷阱：你在next/prev里直接用index + 1/index -1更新状态，而这两个方法捕获的是当前渲染周期的index旧值，不是最新的状态值。第一次渲染时index是0，点击next后设置为1，组件重新渲染，但后续调用next时，方法里拿到的还是旧的index值，导致更新异常，看起来就像index每次被重置为0。
• 次要问题：props的初始值设为空数组，和你后续传入的单个props对象类型不匹配，可能触发额外重渲染，加重状态异常问题。

修改后的完整Hook代码如下：

import React from 'react';

export default (...screens) => {
  const [index, setIndex] = React.useState(0);
  // 初始值改为undefined，匹配实际传入的props类型
  const [currProps, setCurrProps] = React.useState(undefined);

  return {
    start: (initialProps) => {
      // 初始化时重置index为0，避免再次进入序列时从上次的index开始
      setIndex(0);
      setCurrProps(initialProps);
    },
    curr: () => screens[index](currProps),
    next: (newProps) => {
      // 用函数式更新，基于最新的index计算下一个值
      setIndex(prevIndex => {
        if (prevIndex < screens.length - 1) {
          setCurrProps(newProps);
          return prevIndex + 1;
        }
        return prevIndex;
      });
    },
    prev: (newProps) => {
      setIndex(prevIndex => {
        if (prevIndex > 0) {
          setCurrProps(newProps);
          return prevIndex - 1;
        }
        return prevIndex;
      });
    }
  }
};

改动点说明：

• 所有涉及index的状态更新全部改用函数式更新，setIndex的回调参数能拿到上一次的最新index值，完全避开闭包捕获旧值的问题
• 调整props的初始值为undefined，和实际使用时传入的对象类型匹配，避免不必要的渲染异常
• 补充start方法的index重置逻辑，确保每次启动屏幕序列都从第一个页面开始

另外你给出的示例代码有两处语法问题需要修正：

1. React.useEffect() => {应改为React.useEffect(() => {
2. React Native的按钮点击回调属性是onPress不是onclick

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