React Native中RangeError栈溢出报错修复求助

问题概述 #

开发猜数字游戏时遭遇 RangeError: Maximum call stack size exceeded 错误：当AI猜测的数字与玩家输入匹配，调用gameOverHandler后应用崩溃，无法正常显示GameOver组件。

核心问题分析 #

1. 随机数生成函数无限递归：当可选数字范围缩小到只剩被排除的玩家数字时，函数会无限递归调用自身，直接触发栈溢出。
2. 函数引用不稳定导致无限重渲染循环：gameOverHandler在App组件每次渲染时都会重新创建，作为props传入GameScreen后，导致其useEffect依赖项频繁变化，反复执行触发gameOverHandler，形成渲染循环。
3. 屏幕渲染逻辑顺序问题：原条件判断会先渲染GameScreen再覆盖为GameOver，存在组件卸载/挂载的潜在冲突。

解决方案 #

1. 修复随机数生成函数的无限递归 #

修改generateRandomNumber，当可选范围只剩一个数字时直接返回（此时AI已猜对）：

const generateRandomNumber = (min, max, exclude) => {
  // 范围仅余一个数字时，直接返回（即使是排除项，说明AI已命中）
  if (max - min <= 1) {
    return exclude;
  }
  const random = Math.floor(Math.random() * (max - min)) + min;
  if (random === exclude) {
    return generateRandomNumber(min, max, exclude);
  } else {
    return random;
  }
}

2. 用useCallback稳定gameOverHandler引用 #

在App.js中使用useCallback包裹gameOverHandler，确保函数引用在组件重渲染时保持稳定，避免不必要的useEffect触发：

// 先引入useCallback
import { useState, useCallback } from 'react';

// ...

const gameOverHandler = useCallback(() => {
  setGameOver(true);
}, []); // 依赖为空，setGameOver是React提供的稳定函数

3. 调整屏幕渲染逻辑顺序 #

优先判断游戏结束状态，确保GameOver组件优先渲染：

let screen = <GameStart setNumberHandler={setNumberHandler} />;

// 仅当游戏未结束且存在玩家数字时渲染GameScreen
if (userNumber && !gameOver) {
  screen = <GameScreen playerGuess={userNumber} gameOverHandler={gameOverHandler}/>;
} 
// 游戏结束且存在玩家数字时渲染GameOver
else if (gameOver && userNumber) {
  screen = <GameOver />;
}

4. 优化GameScreen的useEffect触发逻辑 #

添加本地状态跟踪游戏是否结束，避免重复调用gameOverHandler：

// 在GameScreen中引入useState
import { useState, useEffect } from 'react';

// ...

const [isGameOver, setIsGameOver] = useState(false);

useEffect(() => {
  if (guess === playerGuess && !isGameOver) {
    setIsGameOver(true);
    gameOverHandler();
  }
}, [guess, playerGuess, gameOverHandler, isGameOver]);

关于useMemo的疑问 #

useMemo的作用是缓存计算结果，避免重复执行昂贵的计算，无法直接解决本次的无限递归和渲染循环问题。本次问题需要的是稳定函数引用，useCallback才是对应解决方案——它和useMemo同属性能优化钩子，但useCallback缓存函数引用，useMemo缓存计算值，二者用途不同。

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