React中如何获取更新后的state？setState后无法拿到最新值如何解决

React 中 useState 返回的更新函数是异步批量执行的，调用 setPlayersName 后不会立即修改当前作用域下的 playerNames 变量，当前上下文的 playerNames 是本次渲染时固定的闭包值，所以调用更新函数后立刻读取 playerNames 拿到的永远是更新前的旧值。

提供两种可直接落地的修复方案：

方案1：直接使用待更新的新值触发 dispatch #

不需要依赖 state 读取最新值，直接用即将写入 state 的新值传递给 dispatch 即可，同时修复原代码的语法问题：

const [playerNames, setPlayersName] = React.useState([]);

// 保留你原有的if判断逻辑即可
if (/* 原有判断条件 */) {
  const updatePlayers = playerNames.map(item => 
    item.id == event.target.value.id ? {...item} : item
  )
  setPlayersName(updatePlayers)
  // 直接用已经计算好的新值触发dispatch
  dispatch(selectPlayers(updatePlayers))
} else {
  const newPlayers = [...playerNames, event.target.value]
  setPlayersName(newPlayers)
  // 直接用新值触发dispatch
  dispatch(selectPlayers(newPlayers))
}

方案2：通过 useEffect 监听 state 变化后触发 dispatch #

如果业务逻辑必须等 state 完成更新后再执行 dispatch，可以把 dispatch 逻辑放在 useEffect 中监听 playerNames 变化：

const [playerNames, setPlayersName] = React.useState([]);

// 监听playerNames变化，更新后自动触发dispatch
React.useEffect(() => {
  dispatch(selectPlayers(playerNames))
}, [playerNames, dispatch])

// 状态更新逻辑不需要额外调整，移除原来直接调用dispatch的代码即可
if (/* 原有判断条件 */) {
  const updatePlayers = playerNames.map(item => 
    item.id == event.target.value.id ? {...item} : item
  )
  setPlayersName(updatePlayers)
} else {
  setPlayersName(prev => [...prev, event.target.value])
}

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