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

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

componentDidMount

，但这不是正确的方法

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

---

您应该使用组件更新。在componentDidUpdate中，您可以检查当前的道具是否与以前的道具不同，就像这样

componentDidUpdate（prevProps）{
if（this.props.userRow&&this.props.userRow！==prevProps.userRow）{
这是我的国家({
firstName:this.props.userRow[firstName]，
lastName:this.props.userRow[lastName]，
年龄：this.props.userRow[age]
});
}
}

此外，在React 16或更高版本中，您可以使用getDerivedStateFromProps。它在渲染前被调用，因此它不更新状态，而不重新渲染组件，性能更高，但它将nextrops、prevState作为参数，因此您可以检查下一个道具是否与上一个道具不同，而不是与上一个道具不同。这里也没有setState，这个方法只是返回新的状态。不过，它也有一些副作用

getDerivedStateFromProps（下一步，上一步）{
如果（nextrops.userRow&&
（nextrops.userRow[firstName]！==prevState.firstName||
nextProps.userRow[lastName]！==prevState.lastName||
nextProps.userRow[age]！==prevState.age
)) {
返回{
firstName:nextrops.userRow[firstName]，
lastName:nextrops.userRow[lastName]，
年龄：nextrops.userRow[年龄]
};
}
}

如果您使用的是React 16或更高版本，您可以使用

静态getDerivedStateFromProps（props，state）

否则

组件将接收props（nextProps）

。（在FormComponent中）

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

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

或

---

我尝试使用componentDidUpdate（prevProps）。在React开发工具中，我看到道具确实得到了更新。但是表单中显示的值没有得到更新。换句话说，即使道具发生变化，状态也不会得到更新。您可以尝试在if语句之后在控制台上记录一些东西吗？componentDidUpdate（）不会被调用进行初始渲染，对吗？getDerivedStateFromProps（）怎么样？我需要将componentDidMount（）与这两个钩子中的一个一起使用吗？您可以使用其中一个钩子，但是componentDidUpdate在初始渲染后运行，而getDerivedStateFromProps在渲染前运行。据我所知，您可以发布FormComponent吗？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]
      };
  }
}