javascript - 为什么我在 Prop 更改后得到旧的状态值

Question

我只是想了解为什么在应用程序中我有以下情况，下面是我的类组件的构造函数:

  constructor(props) {
    super(props);
    this.state = {
      tableAlerts: props.householdAlerts,
      initialAlerts: props.householdAlerts
    }

    console.log('householdAlerts', props.householdAlerts)
  }

在渲染函数中我有:

const { householdAlerts } = this.props;

我的问题是，在构造函数中我得到了空数组，但在渲染函数中我有数据。是否可以在构造函数中获取数据？

Answer 1

使用类组件时这是一个非常糟糕的模式。当您将值复制到状态时，您将忽略任何 Prop 更新。管理它:

1. 它要求您管理同一变量的两个数据源:状态和属性。因此，每次 prop 更改时，您都需要通过将其设置为状态来添加另一个渲染(不要忘记测试上一个值和下一个值的相等性，以避免陷入无限循环)。

2. 您可以使用 getderivedstatefromprops 来避免每次 props 更改时设置状态。生命周期方法。

所以建议是:只使用 Prop ；不要将 Prop 复制到状态。

要了解更多为什么不应该这样做，我强烈推荐 this article .