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

Question

I just want to understand why in the application I have following situation, below is my constructor of class component:

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

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

in render function I have:

const { householdAlerts } = this.props;

My issue is that in constructor I got empty array, but in render funtion I have the data. Is it possible to get the data in constructor?

Answer 1

This is a very bad pattern when using the class component. You are ignoring any props updates when you copy the value into state. to manage it:

1. It requires you to manage two sources of data for the same variable: state and props. Thus, you need to add another render each time your prop change by setting it into state (don't forget to test on equality from prev and next values to avoid being in an infinite loop).

2. You can avoid setting the state each time your props change by using the getderivedstatefromprops lifecycle method.

So the recommendation is: just use the props; do not copy props into state just use the props; do not copy props into state .

To learn more why you shouldn't, I highly recommend this article .

Answer 2

It is not recommended to set your initial component state in the constructor like so because you gonna lose the ability to use { setState } method after to update this property/state.

The best practice is indeed to refer directly to the prop with { this.prop.householdAlerts }, and keep the state usage for local (or in child components} cases.

if anyhow you want to store props in component state for some reason, call it in lifeCycle -

---

  componentDidMount() { 
        const { tableAlerts, initialAlerts } = this.props;
        this.setState({ tableAlerts, initialAlerts });
     }

---

Answer 3

Hagai Harari is right. Nevertheless, your actual problem seems to be that during your initial rendering the array is empty. Can you ensure that the array has some items, when your component is rendered for the first time?

First rendering -> calls constructor

<YourComponent householdAlerts={[]} />

Second rendering -> updates component

<YourComponent householdAlerts={[alert1, alert2, alert3]} />

Answer 4

If you want initial state to have the prop value.Try something like this with 'this' keyword

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

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