React如何设置默认对象状态？useState初始化后状态为空

问题根源及解决步骤： #

• 排查意外的状态覆盖
  全局搜索代码中所有setForm调用，确认是否存在组件渲染/挂载阶段调用setForm({})，或仅修改单个字段时未保留原有状态的情况。比如错误写法会直接覆盖整个对象：

  // 错误：丢失其他字段，导致状态被重置为仅包含position的对象甚至空对象
  setForm({position: 'Intern'});
  

  正确的局部更新必须保留原有状态：

  // 正确：展开原有对象，仅修改目标字段
  setForm(prevState => ({ ...prevState, position: 'Intern' }));
  

• 抽离初始状态常量
  将初始状态定义为独立常量，避免初始化时的意外修改，同时方便后续重置状态：

  const initialForm = {
    company: '',
    website: '',
    location: '',
    position: 'Student',
  };
  
  const [form, setForm] = useState(initialForm);
  

• 检查组件挂载逻辑
  确认组件是否被包裹在会重置状态的容器中，或因key值变化导致组件重新挂载时被意外重置状态。如果是路由切换或列表渲染场景，确保key值稳定。

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