React使用useState更新状态后页面未触发重新渲染问题求助

问题根因 #

你的代码核心有2个错误：

• useState 的 setValues 方法是全量替换state对象，不是浅合并，你多次调用setValues只传单个字段，会把state里原来存的姓名、邮箱、教育经历等所有字段直接清空，导致渲染预览页时没有数据，甚至触发渲染异常。
• setValues 是异步更新，你调用修改isFormSaved的逻辑后，立刻读取values.isFormSaved拿到的还是更新前的旧值，导致按钮文本的判断逻辑完全错误。

修复方案 #

直接修改handleButtonClick逻辑即可，把两次状态更新合并为一次，全量保留原有state字段：

const handleButtonClick = () => {
  // 先计算好新的状态值，避免依赖异步更新后的state
  const newIsFormSaved = !values.isFormSaved;
  setValues({
    // 必须展开原有values，保留所有表单字段
    ...values,
    isFormSaved: newIsFormSaved,
    // 直接根据新状态计算按钮文本，不用异步判断
    btnText: newIsFormSaved ? "Edit info" : "Save info"
  });
};

补充说明 #

你原来的handleChange逻辑是正确的，已经做了...values展开保留原有字段，不需要修改。修改后点击按钮时，state的所有字段都会被保留，isFormSaved状态切换正常，预览页就能拿到完整数据渲染了。

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