React受控表单仅显式重置状态有效，有无更简洁实现方式？

核心问题是你错误地将初始化值嵌套在了state的initValues属性中，而表单受控字段绑定的是this.state.email这类直接属性，导致重置时更新initValues无法同步到表单字段。

问题分析 #

你的构造函数中，this.state = {initValues} 会让state结构变成：

{
  initValues: {
    email: '',
    name: '',
    // ...其他字段
  }
}

但表单输入框绑定的是this.state.email（而非this.state.initValues.email），所以直接更新initValues属性不会影响表单显示的字段值。

正确实现步骤 #

1. 修正state初始化方式 #

将初始化值直接平铺到state中，同时把初始化值保存到实例属性（方便后续复用）：

constructor(props){
  super(props)
  this.initValues = {email:'',name:'', age:'', address:'',phoneNo:'',
      zip:'', city:'', state:''};
  // 直接将初始化值赋值给state，让字段成为state的直接属性
  this.state = { ...this.initValues };
}

2. 实现一键重置 #

现在只需要通过setState直接传入保存的初始化值即可：

// 重置表单的方法
handleReset = () => {
  this.setState(this.initValues);
}

为什么之前的尝试无效？ #

• this.setState({initValues})：仅更新了state中的initValues属性，并未修改email、name等直接绑定的字段，所以表单无变化。
• 函数式setState未返回值：() => { initValues; }没有返回任何数据，相当于没有更新state。
• 直接赋值this.state = { initValues }：React要求必须通过setState更新state才能触发组件重渲染，直接修改state不会更新视图。

内容的提问来源于stack exchange，提问作者Marcelo Scofano Diniz