React组件状态莫名重置为默认值，求排查解决方法

我来帮你分析下这个棘手的问题——明明调用setState只更新form，结果其他状态却被打回原形，甚至在调用setState之前状态就已经不对了。咱们一步步拆解：

首先看代码里的核心问题：直接修改state对象 #

你在textInputHandler里直接拿了this.state.form的引用然后修改：

var reportForm = this.state.form;
reportForm[name] = value;
this.setState({ form: reportForm })

React的state设计是不可变的，直接修改原state对象会绕过React的状态追踪机制，导致状态更新出现各种异常——虽然你看起来只更新了form，但这种直接修改可能让React对整个state的管理出现混乱，甚至间接触发组件的重新初始化。

先修复这个问题：用不可变方式更新form #

把代码改成下面这样，确保每次更新都是创建新的对象，不碰原state：

textInputHandler(e) {
  const target = e.target;
  const name = target.className;
  const value = target.value;
  
  // 用函数式setState，依赖之前的状态，更可靠
  this.setState(prevState => ({
    form: {
      ...prevState.form, // 保留原form的所有属性
      [name]: value      // 更新当前输入的项
    }
  }));
}

函数式的setState在这里更合适，因为我们的更新依赖于之前的form状态，能避免异步更新带来的状态不一致问题。

然后排查：为什么调用setState前状态就被重置了？ #

你说在调用setState之前状态就已经回到默认值了，这大概率是组件被重新挂载了——也就是你的ExampleReport组件被卸载后又重新创建了一遍，这时候构造函数会重新执行，state自然就回到初始值了。

可能的原因有这些：

• 父组件中ExampleReport的渲染有条件判断，比如某个状态变化导致它先被卸载再重新渲染
• 父组件给ExampleReport设置的key属性是动态变化的（比如用了随机数、时间戳，或者每次render都会变的值），React看到key变了会直接销毁旧组件，创建新的
• 父组件自身被重新挂载，导致所有子组件跟着重新初始化

怎么验证？ #

在组件的几个生命周期钩子中加日志追踪：

constructor(props) {
  super(props)
  this.state = { 
    reportDetails: null, 
    report: this.props.report, 
    form: {} 
  }
  this.textInputHandler = this.textInputHandler.bind(this)
  console.log("组件构造函数执行，state初始化", this.state);
}

componentDidMount() {
  console.log("组件挂载完成，当前state", this.state);
}

componentWillUnmount() {
  console.log("组件即将卸载");
}

如果看到组件即将卸载和组件构造函数执行的日志成对出现，那肯定是组件被重新挂载了，这时候去检查父组件的代码就行。

总结解决步骤 #

1. 先修复state的不可变更新问题，用上面的函数式setState方式更新form
2. 检查组件是否被意外重新挂载，重点看父组件中ExampleReport的渲染逻辑和key属性设置
3. 加日志追踪state的变化，确认状态重置的时间点

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