Question

我有一个用于显示用户信息的表格组件和一个用于接收用户输入的表单组件。它接收用户输入并将其保存到表中。还有一个选项可以编辑表格行。单击“编辑”时，我必须将表行详细信息加载到Form组件。我正在尝试解决此用例，但遇到了问题。如果我第一次单击“编辑”，则表行将被加载到表单中。打开表单后，如果我在另一行上单击“编辑”，则表单不会更新。我的问题是，应该使用哪种生命周期方法来进行此更改？我目前正在使用componentDidMount，但这不是正确的方法。

// In table component
<FormComponent userRow={this.state.userRow}
               handleSaveRow={this.state.handleSaveRow}

// Form Component
constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    age: ''
  }
}

componentDidMount() {
  if(this.props.userRow !== null) {
    this.setState({
      firstName: this.props.userRow[firstName],
      lastName: this.props.userRow[lastName],
      age: this.props.userRow[age]
  });
}

Answer 1

您应该使用 componentDidUpdate 。在componentDidUpdate中，您可以检查当前道具与以前的道具是否不同；

componentDidUpdate(prevProps) {
  if (this.props.userRow && this.props.userRow !== prevProps.userRow) {
     this.setState({
      firstName: this.props.userRow[firstName],
      lastName: this.props.userRow[lastName],
      age: this.props.userRow[age]
     });
  }
}

还可以在React 16或更高版本中使用 getDerivedStateFromProps 。它在渲染之前被调用，因此它会在不重新渲染组件的情况下更新状态，但性能更高，但是它将nextProps，prevState作为参数，因此您可以检查下一个道具是否不同于先前的道具。而不是以前的道具。这里也没有 setState ，此方法仅返回新状态。根据{{3}}，它有一些副作用。

getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.userRow && 
     (nextProps.userRow[firstName] !== prevState.firstName ||
      nextProps.userRow[lastName] !== prevState.lastName   ||
      nextProps.userRow[age] !== prevState.age
     )) {
      return {
        firstName: nextProps.userRow[firstName],
        lastName: nextProps.userRow[lastName],
        age: nextProps.userRow[age]
      };
  }
}

Answer 2

如果您使用的是React 16或更高版本，则可以使用static getDerivedStateFromProps(props, state)否则使用componentWillReceiveProps(nextProps)。（在FormComponent中）

在这些方法中，如果即将发布的道具与当前状态不同，请使用新的用户信息更新状态。

componentWillReceiveProps(nextProps){
  if (nextProps.userRow !== this.state.userRow) {
     this.setState({
      firstName: nextProps.userRow[firstName],
      lastName: nextProps.userRow[lastName],
      age: nextProps.userRow[age]
     });
  }
}

或

getDerivedStateFromProps(props, state) {
  if (props.userRow && (props.userRow != state.userRow)) {
      return {
        firstName: props.userRow[firstName],
        lastName: props.userRow[lastName],
        age: props.userRow[age]
      };
  }
}

ReactJS：我应该使用哪种生命周期方法来检测道具的变化？

2 个答案: