React JS 点击按钮时状态变量未正常更新问题排查求助

问题根源 #

• 直接修改React状态值：你直接对letters数组调用push方法属于直接突变状态，React无法检测到这次变更，必须用setLetters来更新数组状态。
• useState更新是异步的：调用setGuesses、setLives等方法后，本次渲染周期内的变量还是旧值，你马上打印的日志自然还是更新前的数值，表现出来就是数值滞后一次点击更新。
• 逻辑缺失：按照你的需求，无论猜对猜错都要累加guesses计数，你当前只有猜对的时候执行了setGuesses，猜错场景没加。
• 语法错误：const [Attempt, setAttempt] =([]); 漏写了useState，会导致运行报错。

修复后的核心代码 #

状态定义修正 #

const [letter, setLetter] = useState('')
const [letters, setLetters] = useState([])
const [guesses, setGuesses] = useState(0)
const [incorrect, setIncorrect] = useState(0)
const [lives, setLives] = useState(5)
// 修正Attempt的定义
const [Attempt, setAttempt] = useState([]);
const hangman = { id:1,title:"initial",word:"initial",hint:"the start of something",value:1}

点击处理函数修正 #

const handleInputButton = (e) => {
  e.preventDefault();
  const trimLetter = letter.trim()
  // 输入为空直接返回
  if (!trimLetter) return

  // 字母已尝试过直接返回
  if (letters.includes(trimLetter)) {
    console.log("stored")
    // 已尝试过的提示逻辑
    return
  }

  // 新字母，先更新已尝试列表，遵循状态不可变原则生成新数组
  const newLetters = [...letters, trimLetter]
  setLetters(newLetters)
  // 不管对错都累加猜测次数
  const newGuesses = guesses + 1
  setGuesses(newGuesses)

  if (hangman.word.toUpperCase().includes(trimLetter.toUpperCase())) {
    console.log("not stored, guess correct")
    // 猜对的展示逻辑
  } else {
    console.log("not stored, guess incorrect")
    const newIncorrect = incorrect + 1
    const newLives = lives - 1
    setIncorrect(newIncorrect)
    setLives(newLives)
    // 猜错的展示逻辑
  }
}

如果需要在状态更新后执行后续逻辑，可以用useEffect监听对应的状态变量，状态更新后会自动触发useEffect里的回调。

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