React.js 表单输入 onChange 与 getDerivedStateFromProps 有问题答案

【问题标题】：React.js Form input onChange having issue with getDerivedStateFromPropsReact.js 表单输入 onChange 与 getDerivedStateFromProps 有问题
【发布时间】：2019-01-29 10:51:43
【问题描述】：

使用getDerivedStateFromProps 时输入onChange 不更新状态。在我将道具从父母传递给孩子之后，我正在检查来自子组件的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)}
      />
    );
  }
}

【问题讨论】：

“不工作”不是正确的问题描述。请解释正在发生的事情以及您期望发生的事情
另外，请注意，您可能甚至不应该使用该方法：reactjs.org/blog/2018/06/07/…
另外注意：状态更新总是部分的，而不是完整的，所以不需要返回prevState。

标签： javascript reactjs

【解决方案1】：

从 React 16.4 开始，getDerivedStateFromProps 被调用并在每次更新时获取组件道具，无论是什么原因导致的（更改道具或状态）。因此，每次调用 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

【讨论】：

这按预期工作。如果没有getDerivedStateFromProps 方法，你知道怎么做吗？
@Mifas 可以让Form组件被完全控制，并将表单状态保存在List组件中