Доступ к свойствам с использованием точечной нотации в React приводит к ошибке

Question

Я пытаюсь получить доступ к объекту json с помощью точечной нотации, но он выдает ошибку. Вот мой код: https://codepen.io/manAbl/pen/aGymRg?editors=0110

Я так разрушаюсь: const { weather } = this.state;

И когда я делаю: console.log(weather) Он показывает мне дырочный объект json, просто отлично, но когда я пытаюсь сделать console.log(weather.name), консоль выдает мне ошибку

Что я делаю не так? Должно быть, я что-то упускаю, но не вижу и застрял

Я хочу иметь возможность получить доступ к свойствам и установить их в качестве значения для моего состояния, чтобы я мог написать им некоторые функции для отображения значка в зависимости от текущей погоды в местоположении

Answer 1

Вы инициализируете свое состояние следующим образом:

this.state = {
  weather: null,
  loading: true,
};

Затем вы обновляете weather var в вашем componentDidMount

componentDidMount запускается после вызова метода render

Итак, в первый раз, когда вызывается метод render, ваш weather var равен null и заполнен после componentDidMount, который называется

Вы должны сделать

this.state = {
  weather: {},
  loading: true,
};

или проверьте, не является ли ваш вар null

Answer 2

this.state.weather изначально равно null (до вызова setState in componentDidMount), поэтому перед доступом к свойствам необходимо проверить, не является ли оно нулевым.

В качестве альтернативы, установите weather на {} вместо null изначально.