为什么我在道具更改后得到旧的状态值

Question

我只是想了解为什么在应用程序中我有以下情况，下面是我的类组件构造函数：  constructor(props) {    super(props);    this.state = {      tableAlerts: props.householdAlerts,      initialAlerts: props.householdAlerts    }    console.log('householdAlerts', props.householdAlerts)  }在渲染功能中我有：const { householdAlerts } = this.props;我的问题是在构造函数中我得到了空数组，但在render函数中我有数据。是否可以在构造函数中获取数据？

Answer 1

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

1. 它要求您管理同一变量的两个数据源：状态和道具。因此，您需要在每次 prop 更改时通过将其设置为 state 来添加另一个渲染（不要忘记测试 prev 和 next 值的相等性以避免陷入无限循环）。

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

所以建议是：just use the props; do not copy props into state。

要了解更多为什么不应该这样做，我强烈推荐这篇文章。

Answer 2

不建议像这样在构造函数中设置初始组件状态，因为在更新此属性/状态后您将失去使用 { setState } 方法的能力。

最佳实践确实是使用 { this.prop.householdAlerts } 直接引用 prop，并为本地（或在子组件中）情况保留状态使用。

如果您出于某种原因想以组件状态存储道具，请在 lifeCycle 中调用它 -

  componentDidMount() { 

        const { tableAlerts, initialAlerts } = this.props;

        this.setState({ tableAlerts, initialAlerts });

     }

Answer 3

如果您希望初始状态具有道具值。请使用“this”关键字尝试类似的操作

  constructor(props) {

    super(props);

    this.state = {

      tableAlerts: this.props.householdAlerts,

      initialAlerts: this.props.householdAlerts

    }

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

  }