我无法在 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

我通过创建一个与您的 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;

希望这会有所帮助！

Answer 2

首先，您使用了错误的对象名称。

这是错误的。

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>
      );
   }