React中useState条件语句更新失效问题：网球模拟赛场景求助

开发小型网球比赛模拟器时，遇到一个问题：当玩家的actualScore达到4时，试图更新对应setWon状态（加1），但该状态始终没有变化。

原问题代码片段 #

if (playerOneData.actualScore >= 4) {
  setPlayerOneData({ ...playerOneData, setWon: playerOneData.setWon + 1 })
  setPlayerOneData({ ...playerOneData, actualScore: 0 })
  setPlayerTwoData({ ...playerTwoData, actualScore: 0 })
}

完整原代码 #

function App() {

  const [playerOneData, setPlayerOneData] = useState({
    name: "blabla",
    level: 2,
    setWon: 0,
    actualScore: 0,
  })

  const [playerTwoData, setPlayerTwoData] = useState({
    name: "blabla",
    level: 4,
    setWon: 0,
    actualScore: 0,
  })

  const generateRandomBall = () => {
    let random = Math.floor(Math.random() * 101);
    console.log(random);
    if (playerOneData.actualScore >= 4) {
      setPlayerOneData({ ...playerOneData, setWon: playerOneData.setWon + 1 })
      setPlayerOneData({ ...playerOneData, actualScore: 0 })
      setPlayerTwoData({ ...playerTwoData, actualScore: 0 })

    }
    else if (playerTwoData.actualScore >= 4) {
      setPlayerTwoData({ ...playerTwoData, setWon: playerTwoData.setWon + 1 })
      setPlayerTwoData({ ...playerTwoData, actualScore: 0 })
      setPlayerOneData({ ...playerOneData, actualScore: 0 })

    }
    else if (random > 50) {
      setPlayerOneData({ ...playerOneData, actualScore: playerOneData.actualScore + 1 })

    }
    else if (random <= 50) {
      setPlayerTwoData({ ...playerTwoData, actualScore: playerTwoData.actualScore + 1 })
    }
  }
}

问题原因 #

核心问题是连续调用同一状态的setter时，后面的更新会覆盖前面的：

• 以playerOne的逻辑为例，你先调用setPlayerOneData更新setWon，紧接着又调用一次setPlayerOneData重置actualScore。这两次更新都是基于同一个旧的playerOneData对象，React会批量处理这两次更新，最终只保留最后一次的修改，导致setWon的增量被丢弃。

解决办法 #

把对同一状态的多次修改合并到单次setState调用中，确保所有修改同时生效：

修改后的generateRandomBall关键逻辑：

const generateRandomBall = () => {
  let random = Math.floor(Math.random() * 101);
  console.log(random);
  
  if (playerOneData.actualScore >= 4) {
    // 合并setWon和actualScore的更新到一次调用
    setPlayerOneData({ 
      ...playerOneData, 
      setWon: playerOneData.setWon + 1,
      actualScore: 0 
    })
    setPlayerTwoData({ ...playerTwoData, actualScore: 0 })

  } else if (playerTwoData.actualScore >= 4) {
    // 同样合并playerTwo的状态更新
    setPlayerTwoData({ 
      ...playerTwoData, 
      setWon: playerTwoData.setWon + 1,
      actualScore: 0 
    })
    setPlayerOneData({ ...playerOneData, actualScore: 0 })

  } else if (random > 50) {
    setPlayerOneData({ ...playerOneData, actualScore: playerOneData.actualScore + 1 })

  } else if (random <= 50) {
    setPlayerTwoData({ ...playerTwoData, actualScore: playerTwoData.actualScore + 1 })
  }
}

这样修改后，setWon的增量和actualScore的重置会被同时应用，不会出现状态被覆盖的问题。

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