javascript - React.js 表单输入 onChange 与 getDerivedStateFromProps 有问题

Question

使用 getDerivedStateFromProps 时，输入 onChange 不更新状态。在我将 props 从父级传递给子级之后，我正在检查子组件的 getDerivedStateFromProps。完整演示 - https://codesandbox.io/s/011m5jwyjw

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {}
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.user) {
      return { form: nextProps.user };
    }

    return {
      ...prevState
    };
  }

  inputHandle(e) {
    this.setState(prevState => ({
      ...prevState,
      form: {
        firstname: e.target.value
      }
    }));
  }

  render() {
    return (
      <input
        type="text"
        name="firstname"
        value={this.state.form.firstname}
        onChange={e => this.inputHandle(e)}
      />
    );
  }
}

Answer 1

从 React 16.4 开始，调用 getDerivedStateFromProps 并在每次更新时获取组件 Prop ，无论是什么原因引起的(更改 Prop 或状态)。所以每次调用 this.setState 时，表单值都会被这段代码重置:

if (nextProps.user) { // nextProps are here on every state change
  return { form: nextProps.user };
}

为了修复它，将当前用户保存到状态并仅在用户更改时重置 form 状态属性。

this.state = {
  form: {},
  lastUser: null,
};

// ...

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.user !== prevState.lastUser) {
    return {
      form: nextProps.user,
      lastUser: nextProps.user
    };
  }

  return {};
}

Demo