React Hooks猜数字游戏Reset按钮功能失效问题排查

问题原因 #

你的代码逻辑失效核心是3个错误：

• React状态更新写法完全错误：useState返回的更新方法是必须调用的函数，你在resetBtn里直接写setGuess = 0、guess = ''这类赋值语句，既没有调用状态更新函数，还直接修改只读的状态变量，完全不会触发组件重渲染，状态自然不会重置。
• 变量混用：组件外定义了全局luckyNumber，组件内又维护了luckyN状态，提交判断用的是全局变量，重置更新的是内部状态，两个值不同步，校验逻辑直接乱套。
• 表单默认行为未拦截：Form内的按钮默认是提交类型，点击会触发表单刷新，打断正常逻辑。

修复步骤 #

1. 删除组件外的全局luckyNumber变量，幸运数字统一用luckyN状态维护，初始化时直接生成随机数即可。
2. 重写重置函数，所有状态更新都通过对应的setter函数传参调用，不要直接给变量赋值。
3. 给所有按钮加type="button"属性，阻止表单默认提交行为，同时给提交逻辑加空值校验，避免空输入提交。
4. 所有涉及幸运数字判断、渲染的位置，统一使用luckyN状态值。

修正后的完整代码 #

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

function GuessingGame() {
  const [guess, setGuess] = useState("");
  const [count, setCount] = useState(0);
  const [guesses, setGuesses] = useState([]);
  // 统一在这里初始化随机幸运数字，删掉外部全局变量
  const [luckyN, setLuckyN] = useState(() => Math.floor(Math.random() * 100) + 1);
  const [message, setMessage] = useState(" Start guessing...");
  const [disabled, setDisabled] = useState(false);

  const handlerValueChange = (event) => {
    setGuess(event.target.value);
  };

  const submitHandler = (e) => {
    // 阻止表单默认提交刷新
    e.preventDefault();
    // 拦截空输入
    if (!guess.trim()) return;

    if (+luckyN === +guess) {
      setMessage(" Congratulations! You guessed the Lucky Number!.");
      setDisabled(true);
    } else if (count === 2) {
      setMessage(" Game over, maximum guess attempts have been reached.");
      setDisabled(true);
    } else if (+luckyN < +guess) {
      setMessage(" Guess is too high.");
    } else if (+luckyN > +guess) {
      setMessage(" Guess is too low.");
    }

    setCount(count + 1);
    setGuesses([...guesses, guess]);
  };

  const resetBtn = () => {
    // 所有状态通过setter函数正确更新
    setDisabled(false);
    setGuess("");
    setCount(0);
    setGuesses([]);
    setMessage(" Start guessing...");
    setLuckyN(Math.floor(Math.random()* 100) + 1);
  };

  return (
    <>
      <h4>
        I am thinking of a number between 1 and 100. Guess the Lucky Number!
      </h4>
      <p>You have made {count} guesses </p>
      <p>Your guess is too high! Your guess is too low!</p>
      <p> Your current guess is {guess}</p>

      <Form>
        <Form.Control
          disabled={disabled}
          type="text"
          value={guess}
          onChange={handlerValueChange}
        ></Form.Control>
        {/* 加type="button"阻止默认提交 */}
        <Button disabled={disabled} type="button" onClick={submitHandler}>
          Guess
        </Button>
        <br />
        <br />
        <Button type="button" onClick={resetBtn}>Reset</Button>
      </Form>

      <p>message:{message}</p>
      <p>Total plays: {count}</p>
      {/* 这里统一渲染luckyN状态 */}
      <p>You are trying to guess this lucky number: {luckyN}!</p>
      <p>Your guesses: </p>

      {guesses?.map((item, index) => {
        return <span key={index}>{item} </span>;
      })}
    </>
  );
}

export default GuessingGame;

改完之后点Reset就能正常清空输入、重置计数、生成新的随机数，游戏重启后校验逻辑也会正常生效，不会出现计数乱加的问题。

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