React使用回调函数时useState不更新状态的问题排查

这个问题的核心在于React 对 state 更新的判断逻辑：React 通过比较更新前后 state 的引用是否变化来决定是否触发重新渲染。当你直接修改原 state 对象/数组的内部属性（也就是「可变修改」，mutate），然后返回同一个引用时，React 会认为 state 没有发生变化，因此不会重新渲染组件。

你的代码里的具体问题 #

在 rollDice 函数中，你直接遍历并修改了 prevState 数组里每个对象的 value 属性：

for (let i = 0; i < prevState.length; i++){
    prevState[i].value = Math.ceil(Math.random() * 6)
}
return prevState

这里的 prevState 是原 state 数组的引用，你修改了数组内对象的属性，但数组本身的引用没有变。React 做浅比较时发现新旧 state 是同一个数组，就跳过了更新流程——这就是为什么控制台能看到修改后的值（因为浏览器控制台的对象是引用类型，展开时会显示最新状态），但组件没有刷新的原因。

另外，你在 rollDice 末尾的 console.log(dice) 显示旧值，是因为 React 的 setState 是异步的，调用 setDice 后不会立即更新组件内的 dice 变量，所以此时拿到的还是更新前的 state。

修正方法 #

要解决这个问题，你需要创建一个新的数组，并为每个需要更新的对象返回新的对象（保持不可变原则）。用 map 方法可以很方便地实现：

function rollDice() {
    setDice(prevState => {
        // 用map创建新数组，每个元素都是新的对象
        return prevState.map(die => ({
            ...die, // 复制原对象的其他属性（比如isHeld）
            value: Math.ceil(Math.random() * 6) // 更新value
        }))
    })
}

这样每次更新都会返回一个新的数组引用，React 就能识别到 state 变化，触发组件重新渲染了。

额外优化点 #

你的 state 初始化逻辑现在是在组件函数顶部执行的，这意味着每次组件渲染时都会调用 allNewDice()。可以把初始化逻辑包裹成一个函数传给 useState，这样只会在组件首次渲染时执行一次：

const [dice, setDice] = React.useState(() => {
    const newDiceValues = allNewDice()
    return newDiceValues.map(value => ({ value, isHeld: false }))
})

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