React useState管理对象状态时DevTools显示状态更新但组件未重渲染

代码实现 #

首先定义了可生成指定范围内随机整数的工具函数：

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

随后定义存储随机数的初始对象，通过useState完成组件状态绑定：

var default_variables = {
  a: randomNum(2,9),
  b: randomNum(1,9),
  c: randomNum(2,9)
}
const [variables,setVariables] = useState(default_variables)

function refreshVariables(){
  setVariables({ ...variables,
                a: randomNum(2,9),
                b: randomNum(1,9),
                c: randomNum(2,9)
              })
}

对应的交互UI代码如下，通过按钮点击触发状态刷新，页面直接渲染当前存储的状态数值：

<Button 
  variant="contained" 
  color="primary"
  onClick= {refreshVariables}
>
  Refresh
</Button>
<div>{variables.a},{variables.b},{variables.c}</div>

异常表现 #

• 点击Refresh按钮后，可在Chrome DevTools中观测到state值持续正常变更，但页面组件始终没有使用变更后的新值触发重渲染
• 为排查该问题，尝试了函数式状态更新的写法，对应代码如下，但异常现象仍未解决：

setVariables(prevState => ({
  ...prevState,
  a: randomNum(2,9),
  b: randomNum(1,9),
  c: randomNum(2,9)
}));

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