Я не могу вернуть информацию об анализе в React Native

Question

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

Я делаю все это на сайте: https://snack.expo.io/

                   Copying you the codes and comment inside it console.logs


        **CODE**

 import React, { Component, createElement } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Image,
      ImageBackground,
      ActivityIndicator,
    } from 'react-native';

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          todos: [],
          isLoading: true,
        };
      }

      componentDidMount = async () => {
        fetch(
          'API'
        )
          .then(res => res.json())
          .then(data => {
            this.setState({ todos: data });

          })
          .catch(error => console.error(error))
          .finally(() => {
            this.setState({ isLoading: false });
          });
      };

      render() {
        const { data, isLoading } = this.state;
        return (
          <View>
          <Text>
          {data.sys.id}
          </Text>
          </View>
        );
      }
    }

    export default App;

Спасибо!

Answer 1

Во-первых, вы используете неправильное имя объекта.

Это неверно.

const { data, isLoading } = this.state;

Это правильно.

const { todos, isLoading } = this.state;

Во-вторых, это потому, что вы пытается получить доступ к объекту, который не определен.

Приложение загрузит и отобразит страницу. И тогда запрос Api сделан. Так что данных нет. Вы можете установить значение по умолчанию или добавить чек.

render() {
    const { todos, isLoading } = this.state;
      return (
        <View>
          <Text>
           {todos.weather > 0 && todos.weather[0].description}
          </Text>
        </View>
      );
   }

Answer 2

Я работал над вашим кодом, создав API-интерфейс погоды, который похож на ваш API-интерфейс, и внес некоторые изменения в код, который теперь работает, проверьте с помощью этого кода.

Это массив погоды, который я получаю из API, я также использую погодный API как ваш

 Object {
    "description": "light intensity drizzle",
    "icon": "09d",
    "id": 300,
    "main": "Drizzle",
  },

код:

import React, { Component, createElement } from 'react';
        import {
          StyleSheet,
          Text,
          View,
          Image,
          ImageBackground,
          ActivityIndicator,
        } from 'react-native';

        class App extends Component {
          constructor(props) {
            super(props);
            this.state = {
              todos: [],
              isLoading: true,
            };
          }

          componentDidMount = async () => {
            fetch(
              'https://samples.openweathermap.org/data/2.5/weather?q=London&appid=439d4b804bc8187953eb36d2a8c26a02'
            )
              .then(res => res.json())
              .then(data => {
                this.setState({ todos: data });
              })
              .catch(error => console.error(error))
              .finally(() => {
                this.setState({ isLoading: false });
              });
          };

          render() {
            return (
                <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                    <Text>Hello</Text>
                    <Text>
                        {this.state.todos.weather != undefined ? this.state.todos.weather[0].description : null}
                    </Text>
                    <Text>
                        {this.state.todos.weather != undefined ? this.state.todos.weather[0].main : null}
                    </Text>
                </View>
            );
          }
    }

    export default App;

Надеюсь, это поможет!