React猜数字游戏Yes/No按钮不渲染问题求助

核心问题 #

你在calculate事件处理函数里返回JSX的做法完全无效——事件处理函数的返回值不会被React用来渲染页面内容，所以哪怕你进入了分支、打印了日志，按钮也不可能显示出来。

代码的其他问题 #

1. 直接用ref操作DOM（比如p1Ref.current.innerHTML）违背React的数据驱动理念，应该用**状态（state）**管理页面内容。
2. randomNumber、count、v3都是普通变量，组件每次重新渲染都会被重置，无法持久化游戏状态。
3. inputRef.current.value是字符串类型，和数字randomNumber直接比较永远不会相等，导致“猜对”的逻辑永远触发不了。

修改后的完整代码 #

import { useNavigate } from "react-router-dom";
import { useState } from "react";

function Game() {
  const navigate = useNavigate();
  // 用状态管理所有游戏相关数据
  const [gameState, setGameState] = useState('playing'); // playing / gameover
  const [randomNumber, setRandomNumber] = useState(Math.floor(Math.random() * 100) + 1);
  const [count, setCount] = useState(0);
  const [guesses, setGuesses] = useState([]);
  const [hintText, setHintText] = useState('');
  const [resultText, setResultText] = useState('');
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const calculate = () => {
    const guess = parseInt(inputValue);
    if (isNaN(guess)) return;

    if (count === 5) {
      // 第六次尝试失败，游戏结束
      setHintText('');
      setResultText('You lost. Gameover');
      setGameState('gameover');
    } else if (guess === randomNumber) {
      // 猜对了，游戏结束
      setHintText(`Your guess is right. The random number is: ${randomNumber}`);
      setResultText(`You guessed it in ${guesses.length + 1} chances. Gameover`);
      setGameState('gameover');
    } else if (guess > randomNumber) {
      // 猜高了
      setHintText('Your guess is high');
      setGuesses([...guesses, guess]);
      setCount(count + 1);
      setResultText(`Your guesses: ${[...guesses, guess].join(', ')}`);
    } else {
      // 猜低了
      setHintText('Your guess is low');
      setGuesses([...guesses, guess]);
      setCount(count + 1);
      setResultText(`Your guesses: ${[...guesses, guess].join(', ')}`);
    }
  };

  const resetGame = () => {
    setGameState('playing');
    setRandomNumber(Math.floor(Math.random() * 100) + 1);
    setCount(0);
    setGuesses([]);
    setHintText('');
    setResultText('');
    setInputValue('');
  };

  return (
    <div className="mad">
      <h1><b>Number guessing game</b></h1>
      <pre>
        <p id="p4">
          We have selected a random number between 1 and 100. See if you can guess it in 6 turns or fewer.
          <br />
          We'll tell you if your guess was too high or too low.
        </p>
      </pre>
      
      {gameState === 'playing' ? (
        <div className="prompt1">
          Enter the prompt: 
          <input 
            type="number" 
            required 
            min="1" 
            max="100" 
            id="input1" 
            value={inputValue} 
            onChange={handleInputChange}
          />
          <button id="done" onClick={calculate}>submit</button>
        </div>
      ) : (
        <div>
          <button onClick={resetGame}>Yes</button>
          <button onClick={() => navigate("/next")}>No</button>
        </div>
      )}

      <p>{hintText}</p>
      <p>{resultText}</p>
    </div>
  );
}

export default Game;

关键修改点 #

1. 用useState替代ref和普通变量，所有状态变化都由React管理，自动触发组件重新渲染。
2. 新增gameState状态控制游戏阶段，游戏结束时切换状态，自动显示Yes/No按钮。
3. 修复了字符串与数字比较的问题，用parseInt转换输入值。
4. 移除所有直接操作DOM的代码，完全遵循React的数据驱动渲染逻辑。
5. 新增resetGame函数处理重新开始游戏的逻辑。

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