使用 openweathermap api 时无法访问某些对象属性

Question

我正在使用 axios 从我的 react 应用程序中的 openweathermap api 获取天气信息。从 api 调用的结果（它是一个 json 对象）中，我可以访问一些属性，例如 data.base。但无法访问data.coord.icon 或data.weather[0].id 等。

data = [
        coord: { lon: -0.1257,lat: 51.5085},
        weather: [{ id: 721,
                    main: "Haze",
                    description: "haze",
                    icon: "50n"
                  }],
        base: "stations"
      ]

我尝试了所有可能的组合。尝试返回 data.coord 时，得到错误 Objects are not valid as a React child (found: object with keys {lon, lat})。如果您打算渲染一组子项，请改用数组 但是data.coord.lon 给出了 lon of undefined

import React, { Component } from 'react';
import axios from 'axios';

export class WeatherInfo extends Component {

constructor(props) {
    super(props)

    this.state = {
        isFetching: false,
        data: [],
    }
}

//function to fetch weather information
async  getWeatherData(lat, lon) {
    const weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_KEY}`

    try {
        this.setState({ ...this.state, isFetching: true });
        const response = await axios.get(weatherApi);
        this.setState({ data: response.data, isFetching: false });
        console.log(response.data)
    } catch (error) {
        console.log(error);
        this.setState({ isFetching: false })
    }
}

//function to get access to users location and to call getWeatherData function
weatherInit = () => {

    const success = (position) => {
        this.getWeatherData(position.coords.latitude, position.coords.longitude);
    }

    const error = () => {
        alert('Unable to retrieve location.');
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert('Your browser does not support location tracking, or permission is denied.');
    }
}

componentDidMount() {
    this.weatherInit();
}

render() {
    const { data } = this.state;
    return (
        <div>
            <p>{data.name}</p>
        </div>
    )
}
}

export default WeatherInfo

Answer 1

以下是如何显示 API 返回的各种数据的示例。

import React, {
  Component
} from 'react';
import axios from 'axios';

export class WeatherInfo extends Component {

  constructor(props) {
    super(props)

    this.state = {
      isFetching: false,
      data: [],
    }
  }

  //function to fetch weather information
  async getWeatherData(lat, lon) {
    const weatherApi = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_KEY}`

    try {
      this.setState({ ...this.state,
        isFetching: true
      });
      const response = await axios.get(weatherApi);
      if(response.status===200){
            //update state only if status is 200
            this.setState({
                 data: response.data,
                 isFetching: false
            });
      console.log(response.data)
      }
    } catch (error) {
      console.log(error);
      this.setState({
        isFetching: false
      })
    }
  }

  //function to get access to users location and to call getWeatherData function
  weatherInit = () => {

    const success = (position) => {
      this.getWeatherData(position.coords.latitude, position.coords.longitude);
    }

    const error = () => {
      alert('Unable to retrieve location.');
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    } else {
      alert('Your browser does not support location tracking, or permission is denied.');
    }
  }

  componentDidMount() {
    this.weatherInit();
  }

  render() {
    const {data} = this.state;
    
    if (data) {
      return ( 
      <div >
        //display coord
        <p > {data.coord.lon} < /p> 
        <p > {data.coord.lat} < /p>
        // display weather ids
        {data.weather.map(item => {
           return ( 
           < p > { item.id } < /p>) })
         } 
         < p > { data.name } < /p> < / div >
        )
    }
    else {
     return (<div>Data is loading or Not Found</div>)}
    }
   }
 }

  export default WeatherInfo
  

您需要为每个要显示的值创建一个 JSX 元素。 对不起，格式化。