React.js问题：基于状态的表单无法更新

我正在实现一个基础功能：插入数据并传递回主组件，同时展示可点击并在表单中编辑的项目列表。插入项目后点击LI元素，表单状态能正确设置，但输入框无法编辑——输入时文本保持不变，就像onChange方法没生效一样。我怀疑是getDerivedStateFromProps使用不当？

相关代码如下：

class SimpleForm extends React.Component {
  constructor() {
    super();
    this.state = {
      id: null,
      firstName: ''
    };
  }
  static getDerivedStateFromProps(props, state) {
    if (props.user === null) return null;
    return {
      id: props.user.id,
      firstName: props.user.firstName
    }
  }
  handleChange = e => {
    const value = e.target.value;
    this.setState(prevState => {
      return { firstName: value }
    });
  }
  handleSubmit = e => {
    e.preventDefault();
    const event = e.target;
    this.props.onAdd(this.state);
    this.setState(prevState => {
      return { id: null, firstName: '' };
    }, () => {
      event.reset();
    });
  }
  render() {
    const { firstName } = this.state;
    return (
      <form onSubmit = {this.handleSubmit}>
        <input type = "text" name = "firstName" value = {firstName} onChange = {this.handleChange} />
        &nbsp;
        <input type = "submit" value = "Submit" />
      </form>
    );
  }
}

你猜的完全没错！问题根源就是getDerivedStateFromProps的使用方式不对。

问题分析 #

getDerivedStateFromProps这个生命周期方法的触发时机是组件接收新props、自身state更新、或者父组件重渲染时，每次都会执行。

当你点击列表项，父组件把选中的user传给SimpleForm的props.user，这时候getDerivedStateFromProps会把组件状态更新成这个user的值，这一步是正常的。但当你在输入框输入内容时，handleChange会更新组件的firstName状态，可状态更新后getDerivedStateFromProps又会立刻触发——这时候props.user还是之前选中的那个用户对象（父组件还没更新这个props），所以它会把状态又强行重置回props.user.firstName，导致你输入的内容瞬间被覆盖，看起来就像输入框完全没反应。

解决方案 #

这里给你几种可行的修复方式，你可以根据自己的场景选择：

1. 优化getDerivedStateFromProps，仅在props.user变化时更新状态

修改这个方法，只有当传入的props.user和当前状态的用户id不一致时，才更新状态，避免覆盖用户的输入：

static getDerivedStateFromProps(props, state) {
  // 只有当props.user存在，且id和当前state的id不同时，才更新状态
  if (props.user && props.user.id !== state.id) {
    return {
      id: props.user.id,
      firstName: props.user.firstName
    };
  }
  // 其他情况返回null，不修改状态
  return null;
}

2. 改用单向数据流，让父组件管理所有状态

这是更符合React设计理念的方式：子组件SimpleForm只负责展示表单和传递事件，不维护自己的状态，所有状态都由父组件管理。这样能彻底避免getDerivedStateFromProps带来的问题。

修改后的SimpleForm：

class SimpleForm extends React.Component {
  handleChange = e => {
    const value = e.target.value;
    // 把输入变化传递给父组件，由父组件更新状态
    this.props.onChange({
      ...this.props.user,
      firstName: value
    });
  }

  handleSubmit = e => {
    e.preventDefault();
    const event = e.target;
    this.props.onAdd(this.props.user);
    // 通知父组件重置表单状态
    this.props.onReset();
    event.reset();
  }

  render() {
    const { firstName } = this.props.user;
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          name="firstName" 
          value={firstName} 
          onChange={this.handleChange} 
        />
        &nbsp;
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

对应的父组件需要维护selectedUser状态，实现onChange、onAdd、onReset这几个方法来处理状态更新。

3. 用key重置组件（简单场景快速解决方案）

如果你的场景比较简单，也可以通过给SimpleForm设置动态key的方式，让React在切换编辑对象时直接销毁旧组件实例，创建新的实例，这样状态会自动重置，避免getDerivedStateFromProps的干扰。

在父组件中使用SimpleForm时：

<SimpleForm 
  user={selectedUser} 
  onAdd={this.handleAdd} 
  key={selectedUser ? selectedUser.id : 'new-item'}
/>

当selectedUser变化时，key也会变化，React会重新初始化SimpleForm，状态就不会被旧的props干扰了。

总结 #

getDerivedStateFromProps是一个很容易误用的生命周期，它的核心作用是让组件根据props的变化同步状态，但一定要注意不能无条件覆盖组件自身的状态更新。优先考虑单向数据流的方式，让父组件统一管理状态，子组件做纯展示，这样代码会更清晰，也能减少这类奇怪的bug。

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