React使用useState管理状态时Overview页面数据未更新问题求助

你不需要使用useEffect，问题由以下3个代码逻辑错误导致：

• 表单输入框缺少name属性
  你在Practice/GeneralInfo/Experience等表单组件中的输入字段仅设置了id，没有配置和state字段名对应的name属性。而handleChange函数是通过e.target.name读取key来更新state的，拿不到正确的key自然无法更新对应字段，切换到Overview页面时就看不到输入的内容。
• handleButtonClick函数错误覆盖state
  你第一次调用setValues({isFormSaved: !values.isFormSaved})时没有解构之前的state，会把state内存储的姓名、邮箱、工作经历等所有其他字段全部清空，Overview自然无法渲染出数据。
• 异步state更新导致的判断逻辑错误
  React的state更新是异步的，你在调用setValues之后立刻判断!values.isFormSaved时，拿到的还是更新前的旧值，按钮文本切换的逻辑会出错。

修复方案 #

1. 优化handleButtonClick逻辑，合并两次setValues操作，用函数式更新拿到最新的prev state：

const handleButtonClick = () => {
  setValues(prev => ({
    ...prev,
    isFormSaved: !prev.isFormSaved,
    btnText: !prev.isFormSaved ? "Edit info" : "Save info"
  }));
};

2. 为所有表单输入框添加name属性，值和state中的对应key保持一致，以Practice组件为例：

<input
  type="text"
  id="companyName"
  name="companyName" // 新增对应name属性
  onChange={values.onChange}
  disabled={values.disabled}
  placeholder={values.placeholder.companyName}
/>

所有输入框都需要按上述规则补充name属性。
3. （可选）优化handleChange用函数式更新避免闭包问题：

const handleChange = (e) => {
  const { name, value } = e.target;
  setValues(prev => ({ ...prev, [name]: value }));
};

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