Почему я получаю старые значения состояния после смены реквизита?

Question

Я просто хочу понять, почему в приложении у меня следующая ситуация, ниже мой конструктор компонента класса:

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

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

в функции рендеринга, которую я имею:

const { householdAlerts } = this.props;

My проблема в том, что в конструкторе я получил пустой массив, но в функции render у меня есть данные. Можно ли получить данные в конструкторе?

Answer 1

Это очень плохой шаблон при использовании компонента класса. Вы игнорируете все реквизиты, когда копируете значение в состояние. для управления:

1. Требуется управление двумя источниками данных для одной и той же переменной: состояние и реквизиты. Таким образом, вам нужно добавлять еще один рендер каждый раз, когда вы меняете реквизит, устанавливая его в состояние (не забудьте проверить равенство из значений prev и next, чтобы избежать бесконечного l oop).

2. Вы можете избежать установки состояния каждый раз, когда ваши реквизиты меняются, используя метод жизненного цикла getderivedstatefromprops.

Поэтому рекомендуется: just use the props; do not copy props into state.

Чтобы узнать больше, почему не стоит, я настоятельно рекомендую эту статью .

Answer 2

Хагай Харари прав. Тем не менее, ваша настоящая проблема заключается в том, что во время вашего начального рендеринга массив пуст. Можете ли вы убедиться, что массив содержит некоторые элементы, когда ваш компонент отображается в первый раз?

Первый рендеринг -> Конструктор вызовов

<YourComponent householdAlerts={[]} />

Второй рендеринг -> Обновление компонента

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

Answer 3

Если вы хотите, чтобы начальное состояние имело значение проп. Попробуйте что-то вроде этого с ключевым словом this. 1001 * 1002

Answer 4

Не рекомендуется устанавливать исходное состояние компонента в конструкторе, например, так как вы потеряете возможность использовать метод {setState} после обновления этого свойства / состояния.

На самом деле рекомендуется обратитесь непосредственно к реквизиту с помощью {this.prop.householdAlerts} и сохраните использование состояния для локальных (или в дочерних компонентах} дел.

, если по каким-либо причинам вы хотите хранить реквизиты в состоянии компонента, позвоните это в жизненном цикле -

---

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

---