Как отрегулировать значения API через карту в реакции?

Question

Я хочу сделать несколько объектов (дней) от погодного API

const myApi = 'http://api.openweathermap.org/data/2.5/forecast?q=London,gb&APPID=MY_UNIQUE_ID&cnt=5' 

Я устанавливаю исходное состояние для этих значений в моем APP классе:

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     locationName: 'your local area', 
     displayUnits: 'F', 
     locTemp: '', 
     humidity: '', 
     weatherSummary: '', 
     weatherSummaryDescription: '', 
     dayID: '', 
     dateFor: '', 
     everyDay: [] 
    }; 
    } 

Я тогда установить эти значения с новое состояние, большинство из которых хватают из API:

componentWillMount() { 
     superagent.get(myApi).then((response) => { 
      console.log('CITY NAME IS' + response.body.city.name) 
      console.log('RESPONSE BODY IS' + response.body) 
     this.setState({ 
      locationName: response.body.city.name, 
      locTemp: response.body.list[0].main.temp, 
      humidity: response.body.list[0].main.humidity, 
      weatherSummary: response.body.list[0].weather[0].main, 
      weatherSummaryDescription: response.body.list[0].weather[0].description, 
      dayID: response.body.list[0].dt, 
      dateFor: response.body.list[0].dt_txt, 
      everyDay: response.body 

     }) 


     }); 

    } 

создать функцию вывода для моей визуализации функции

export default class MyForecast extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
    displayUnits: props.displayUnits 
    }; 
} 



    render() { 

    return (
     <div> 
     <h1>Weather for&nbsp;{this.props.locationName}</h1> 
     <h3> on {this.props.dateFor}</h3> 
     <h2> 
      {this.props.weatherSummaryDescription} &nbsp; 
      <Temp temp={this.props.locTemp} displayUnits={this.props.displayUnits} clickHandler={this.toggleDisplayUnits.bind(this)}/> 
     </h2> 
     <WeatherIcon weather={this.props.weatherSummary} /> 
     <p>The ID for this day is <strong>{this.props.dayID}</strong></p> 
     </div>); 
    } 


    toggleDisplayUnits() { 
    this.state.displayUnits === 'F' ? this.setState({ 
     displayUnits: 'C' 
    }) : this.setState({ 
     displayUnits: 'F' 
    }); 
    } 

} 

Потом обратно в приложение, которое я просверлить everyDay объекта для того, чтобы генерировать 5 экземпляров MyForecast с 5 различных объектов

render() { 

    return (
     <div> 
     {this.state.everyDay.map((data, i) => 
      <MyForecast 
      key={i} 
      locationName={data.locationName} 
      dateFor={data.dateFor} 
      weatherSummaryDescription={data.weatherSummaryDescription} 
      weatherSummary={data.weatherSummary} 
      locTemp={data.locTemp} 
      dayID={this.state.dayID}/> 
     )} 
     </div> 
    ); 
    } 

Это приводит к 2 ошибки:

Uncaught TypeError: this.state.everyDay.map is not a function

И

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null

Поскольку это не имеет никакого значения для каждодневных (body.response), как это неправильный формат (не массив)

Любые идеи о том, как сделать это в правильном пути?

JSON ФОРМАТ:

"city": { 
    "id": 2643743, 
    "name": "London", 
    "coord": { 
     "lon": -0.12574, 
     "lat": 51.50853 
    }, 
    "country": "GB", 
    "population": 0, 
    "sys": { 
     "population": 0 
    } 
    }, 
    "cod": "200", 
    "message": 0.1174, 
    "cnt": 5, 
    "list": [ 
    { 
     "dt": 1485097200, 
     "main": { 
     "temp": 279.16, 
     "temp_min": 278.192, 
     "temp_max": 279.16, 
     "pressure": 1033.03, 
     "sea_level": 1040.8, 
     "grnd_level": 1033.03, 
     "humidity": 75, 
     "temp_kf": 0.97 
     }, 
     "weather": [ 
     { 
      "id": 800, 
      "main": "Clear", 
      "description": "clear sky", 
      "icon": "01d" 
     } 
... 

Answer 1

ли эта работа:

componentWillMount() { 
    superagent.get(myApi).then((response) => { 
    this.everyDAY = response.body; 
    } 
} 

, а затем в визуализации:

return (
    <div> 
    {this.everyDay.list.map((data, i) => 
     <MyForecast 
     key={i} 
     locationName={this.everyDay.city.name} 
     dateFor={data.dt_txt} 
     weatherSummaryDescription={data.weather[0].description} 
     weatherSummary={data.weather[0].main} 
     locTemp={data.main.temp} 
     dayID={data.dayID}/> 
    )} 
    </div> 
);