React.js表單輸入onChange與getDerivedStateFromProps有問題

Question

輸入onChange在使用getDerivedStateFromProps時不更新狀態。 在我將道具從父級傳遞給子級之后，我正在檢查來自子組件的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並在每次更新時獲取組件道具，無論它是什么原因（更改道具或狀態）。 因此，每次調用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 {};
}

演示