React Native列表循环切换选项仅显示最后两项的问题求助

问题根源 #

你在组件函数内通过var声明的index、gamesList、game都属于普通局部变量，每次调用setGameText触发组件重渲染时，这些变量都会被重新初始化，index会被重置为初始值0，导致切换计数逻辑无法按预期运行，出现选项显示异常的问题。

修复方案 #

我们可以通过React提供的状态/引用能力存储index，保证它的值在组件重渲染后不会丢失，这里提供两种实现方式：

方案1：用useState存储索引（推荐） #

将索引存入state，同时直接通过索引派生当前选中的游戏名称，不需要单独维护gameText状态，逻辑更简洁：

// 常量移到组件外部，避免每次渲染重复声明
const gamesList = ["Quadratic", "Magic Square", "Settings", "Option 3"];

function App() {
  // 用state存储当前选中索引，跨渲染周期保留值
  const [currentIndex, setCurrentIndex] = useState(0);
  // 直接派生当前选中的游戏名称，无需额外state
  const currentGame = gamesList[currentIndex];
  const [gameGame, setGameGame] = useState(currentGame);
  const zAnim = useRef(new Animated.ValueXY({ x: 0, y: 1000 })).current;

  const cycleLeft = () => {
    setCurrentIndex(prev => {
      const newIndex = prev - 1;
      return newIndex < 0 ? gamesList.length - 1 : newIndex;
    });
  }

  const cycleRight = () => {
    setCurrentIndex(prev => {
      const newIndex = prev + 1;
      return newIndex > gamesList.length - 1 ? 0 : newIndex;
    });
  }

  // 后续渲染直接使用currentGame即可
}

方案2：用useRef存储索引 #

如果不需要索引变化本身触发渲染，也可以用useRef存储索引，和你原本的代码逻辑更接近：

const gamesList = ["Quadratic", "Magic Square", "Settings", "Option 3"];

function App() {
  // 用ref存储索引，值跨渲染不会重置
  const indexRef = useRef(0);
  const [gameText, setGameText] = useState(gamesList[indexRef.current]);
  const [gameGame, setGameGame] = useState(gamesList[indexRef.current]);
  const zAnim = useRef(new Animated.ValueXY({ x: 0, y: 1000 })).current;

  const cycleLeft  = () =>  {
    indexRef.current = indexRef.current - 1;
    if (indexRef.current < 0) indexRef.current = gamesList.length - 1;
    setGameText(gamesList[indexRef.current]);
    console.log(gamesList[indexRef.current] + " " + indexRef.current);
  }

  const cycleRight = () => {
    indexRef.current = indexRef.current + 1;
    if (indexRef.current > gamesList.length - 1) indexRef.current = 0;
    setGameText(gamesList[indexRef.current]);
    console.log(gamesList[indexRef.current] + " " + indexRef.current);
  }
}

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