Рендеринг данных JSON из API-вызова в ответ

Question

Работа над приложением с использованием API карт Google для геолокации с помощью Reactjs.Моя цель сейчас - просто отобразить все данные JSON в окне (будет использовано позже).Нет ошибок, но ничего не рендеринг на страницу.Я пытаюсь получить доступ к данным неправильно?

class App extends Component {
  constructor () {
    super();
    this.state = {
      isLoaded: false,
      results: {}
    };
  }

  componentDidMount() {
    fetch(geo_url)
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          results: result.results
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
  }


  render() {
    const {error, isLoaded, results} = this.state;
      if (error) {
        return <div>Error: {error.message} </div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
      return (
        <div className="App">
          Location Data:
          {results.geometry}
        </div>
      );
  }
  }
}

Ниже приведен пример JSON, к которому я пытаюсь получить доступ:

{
    "results": [
        {
            "address_components": [
                {
                    "long_name": "1600",
                    "short_name": "1600",
                    "types": [
                        "street_number"
                    ]
                },
                {
                    "long_name": "Amphitheatre Parkway",
                    "short_name": "Amphitheatre Pkwy",
                    "types": [
                        "route"
                    ]
                },
                {
                    "long_name": "Mountain View",
                    "short_name": "Mountain View",
                    "types": [
                        "locality",
                        "political"
                    ]
                },
                {
                    "long_name": "Santa Clara County",
                    "short_name": "Santa Clara County",
                    "types": [
                        "administrative_area_level_2",
                        "political"
                    ]
                },
                {
                    "long_name": "California",
                    "short_name": "CA",
                    "types": [
                        "administrative_area_level_1",
                        "political"
                    ]
                },
                {
                    "long_name": "United States",
                    "short_name": "US",
                    "types": [
                        "country",
                        "political"
                    ]
                },
                {
                    "long_name": "94043",
                    "short_name": "94043",
                    "types": [
                        "postal_code"
                    ]
                }
            ],
            "formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
            "geometry": {
                "location": {
                    "lat": 37.422617,
                    "lng": -122.0853839
                },
                "location_type": "ROOFTOP",
                "viewport": {
                    "northeast": {
                        "lat": 37.4239659802915,
                        "lng": -122.0840349197085
                    },
                    "southwest": {
                        "lat": 37.4212680197085,
                        "lng": -122.0867328802915
                    }
                }
            },
            "place_id": "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
            "plus_code": {
                "compound_code": "CWF7+2R Mountain View, California, United States",
                "global_code": "849VCWF7+2R"
            },
            "types": [
                "street_address"
            ]
        }
    ],
    "status": "OK"
}

Answer 1

Во-первых, вы должны сделать:

 <div className="App">
     {this.state.results.geometry}
  </div>

или

     render() {
          const {results} = this.state
          return (
            <div className="App">
              {results.geometry}
            </div>
          );
      }
}

Но, как сказал @Yossi, ваш результат не определен в вашем первом рендере.Вот почему у вас есть: «результаты не определены».Вы можете использовать «lodash» для форсирования вашего рендера.Это работает, даже если я не знаю, если это хорошая практика

Вы можете проверить:

import _ from 'lodash';

     render() {
          const {results} = this.state
          return (
          {!_.isEmpty(results) && 
            <div className="App">
              {results.geometry}
            </div>             
            }

          );
      }

Это должно работать :)

PS: извините за мойплохой английский;)

Answer 2

Вы можете установить в состояние ключ для ошибки: false.

В componentDidMount его лучше использовать тогда и ловить для ошибок

  componentDidMount() {
fetch(geo_url)
.then(res => res.json())
.then(
  (result) => {
    this.setState({
      isLoaded: true,
      results: result.results
    });
  },
  (error) => {
    this.setState({
      isLoaded: true,
      error
    });
  }
).catch(error) {
   this.setState({
   isLoaded: true,
   error
  })
 }

}

Answer 3

Первый рендеринг происходит до получения результатов.Проверьте в render (), есть ли уже результаты.Если нет, отобразите сообщение «loading».

Кроме того, исправьте обработку ошибок при попытке извлечь данные.Вы устанавливаете переменную state.error, которая не была определена.Затем при рендеринге выведите сообщение об ошибке, если загрузка выполнена, но есть ошибка.