映射由 React.js 中的组件获取的数组的问题

Question

I'm a newbie with React, and I'm trying to understand some basic concepts. Here's my problem:

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

const appkey = 'xxxxxx';

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);
        return (

            <div>
            {this.state.data.map(weather => {
                return (
                    <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')
    )

My favorite way is to show the content first then explain the problem.

Like you can see, I use the Openweathermap api just to create some data to show in a component.

It works, I was able to console.log the result then the idea is to map the result to show in an html markup. The problem is that I'm receiving an error which was this.state.data.map is not a function. I'm not 100% sure on why it is not working because it supposes to be an array, any idea?

Plus, for some reason the console.log(this.state.data) will produce the same result three times, the first time the data array will be empty, the second and the third the data is like it is supposed to be.

Answer 1

According to the demo in their documentation https://samples.openweathermap.org/data/2.5/weather returns JSON of the form:

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

So yes, absolutely not an array. So you can actually simplify your code:

render() {
  console.log(this.state.data);
  const weather = this.state.data;
  if (weather && weather.main) {
    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>
    )
  } else {
    return (<div>loading..</div>);
  }
}

Answer 2

The response you are getting is an object and map does not work on objects. You would need to convert that to array to maps it. You can use concat function.

[].concat(this.state.data).map should work.

Try Bellow

{[].concat(this.state.data).map(weather => {
            return (
                <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>

Hope this helps.