При обновлении страницы реквизиты деструктурирования дают неидратированные значения в componentDidMount

Question

У меня в приложении странная ошибка, с которой я не сталкивался в React.

Обычно, когда страница обновляется, я беру определенные параметры из URL, делаю запросы API на запросы и затемЗаполните мое состояние Redux с результатами.

Например:

 async componentDidMount() {
    const {
      values1, values2, match,
    } = this.props;

    await getSingleData(match.params.id);
    await getData(values1, values2);
  }

Итак, из параметра URL я беру Id, затем делаю запрос API, чтобы получить данные и сохранить их вRedux.Однако, когда я использую синтаксис, я получаю пустые или нулевые значения.При использовании деструктурированного синтаксиса кажется, что он ссылается на пустое хранилище Redux до гидратации данных, а полная ссылка дает правильные значения после гидратации данных.

Когда я использую полные this.props.values1 и this.props.values2 ссылка, все работает нормально.

Например, в этом коде все работает так, как должно:

 async componentDidMount() {
    const {
      values1, values2, match,
    } = this.props;

    await getSingleData(match.params.id);
    await getData(this.props.values1, this.props.values2);
  }

Я не совсем понимаю, почему это происходит.Насколько я понимаю, у объектов дескрутирования будет та же ссылка, что и у недесструктурированного аналога.Но это не тот случай, по-видимому.Любой вход?

Answer 1

Разрушение происходит немедленно при вызове функции, и в этот момент this.props имеет значение null.

После вызова await getSingleData(match.params.id) (который запускается после деструктуризации) this.props заполнено.

Таким образом, вы можете получить доступ к this.props.value1.

Разрушение не отслеживает и не наблюдает изменения исходного объекта.