Доступ к объекту внутри другого объекта возвращает не может прочитать свойство undefined

Question

У меня есть тривиальная проблема, но я не могу ее решить по какой-то причине.

У меня есть объект, который является запросом возврата от API:

state = { 
        data: []
    }

    componentDidMount() {
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=${appkey}`)
        .then(data => data.json())
        // .then((data) => {
        //  console.log(data);
        // })
        .then(data => this.setState({data}))

    }

и:

render() {
const weather = this.state.data
console.log(weather.main);

Первая часть - это то, что предшествует компоненту реакции. Мне удалось получить объект, а затем я создаю переменную (const), которая возвращает другой объект, в этом случае:

{feels_like: 271.85
temp_min: 272.15
temp_max: 276.48
pressure: 1027
humidity: 97}

Для моего невежества странная часть заключается в том, что, если я пытаюсь получить доступ к Например, первое значение (feels_like) таким образом:

weather.main.feels_like

выдает ошибку, которая не может прочитать свойство 'feels_like' из неопределенного.

Теперь я попытался l oop через объект, но он не сработал, и я попытался получить доступ к свойству с другим синтаксисом, но все равно он выдал ошибку.

Я что-то упустил?

Цель состоит в том, чтобы создайте такой компонент:

console.log(this.state.data);
 const weather = this.state.data;
 return (

  <div>
  <div key={weather.id}>
  <h3>Library Product of the Week!</h3>
  <h4>{weather.name}</h4>
  <h4>{weather.main.temp}</h4>
  <h4>{weather.main.feels_like}</h4>
  <h4>{weather.main.temp_min}</h4>
  <h4>{weather.main.temp_max}</h4>
  <h4>{weather.main.pressure}</h4>
  <h4>{weather.main.humidity}</h4>
  </div>
  </div>
  )
}

Вот и весь код:

import React from 'react'
 import { render } from 'react-dom'

 const appkey = 'xx';

 class Message extends React.Component {

    state = { 
        data: []
    }

    componentDidMount() {
        fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=${appkey}`)
        .then(data => data.json())
        // .then((data) => {
            //  console.log(data);
            // })
            .then(data => this.setState({data}))

        }

        componentDidUpdate() {
            console.log("The component just updated")
        }

        render() {
            console.log(this.state.data);
            const weather = this.state.data;
            return (

                <div>
                <div key={weather.id}>
                <h3>Library Product of the Week!</h3>
                <h4>{weather.name}</h4>
                <h4>{weather.main.temp}</h4>
                <h4>{weather.main.feels_like}</h4>
                <h4>{weather.main.temp_min}</h4>
                <h4>{weather.main.temp_max}</h4>
                <h4>{weather.main.pressure}</h4>
                <h4>{weather.main.humidity}</h4>
                </div>
                </div>
                )
        }
    }

    render(
        <Message />, 
        document.getElementById('root')
        )

Answer 1

Из предоставленного вами кода кажется, что вы уже обращаетесь к данным, прежде чем они будут впервые сохранены в состоянии. Итак, вы пытаетесь получить значение feels_like из вашего пустого массива, который является вашим начальным состоянием.

Чтобы исправить это, вы должны проверить, присутствуют ли ваши данные, прежде чем использовать их в вашем методе рендеринга

РЕДАКТИРОВАТЬ:

По какой-то причине ключ API не работал для меня и упомянутых документов это может занять несколько часов, прежде чем это сработает, поэтому я не смогу проверить это для вас. Но код sandbo x проверяет наличие данных перед их отображением. И он будет отображать некоторый текст, если данные неинициализированы. Надеюсь, это поможет!