Возникли проблемы с использованием Axios для обработки моих данных JSON

Question

Я пытаюсь установить состояние из этих данных,

var axios = require('axios');
import Trails from './trails';
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
        trails: []
    } 
} 
componentWillMount() {
      axios
      .get('https://www.mtbproject.com/data/get-trails-by-id?ids=2081068,830442%208013961&key=(API-KEY)')
      .then(response => response.data)
      .then(trails => this.setState({trails}));
    }

, который выглядит так:

{
    "trails": [
        {
            "id": 2081068,
            "name": "San Dieguito River Park - Bernardo Bay\/ Piedras Pintadas Trail",
            "type": "Featured Ride",
            "summary": "Sweet little loop of singletrack trails.",
            "difficulty": "blue",
            "stars": 3.6,
            "starVotes": 24,
            "location": "Escondido, California",
            "url": "https:\/\/www.mtbproject.com\/trail\/2081068\/san-dieguito-river-park-bernardo-bay-piedras-pintadas-trail",
            "imgSqSmall": "https:\/\/cdn-files.apstatic.com\/mtb\/2148715_sqsmall_1372258680.jpg",
            "imgSmall": "https:\/\/cdn-files.apstatic.com\/mtb\/2148715_small_1372258680.jpg",
            "imgSmallMed": "https:\/\/cdn-files.apstatic.com\/mtb\/2148715_smallMed_1372258680.jpg",
            "imgMedium": "https:\/\/cdn-files.apstatic.com\/mtb\/2148715_medium_1372258680.jpg",
            "length": 8.2,
            "ascent": 570,
            "descent": -567,
            "high": 488,
            "low": 317,
            "longitude": -117.0766,
            "latitude": 33.0512,
            "conditionStatus": "All Clear",
            "conditionDetails": "Dry",
            "conditionDate": "2018-09-11 09:12:17"
        }
    ],
    "success": 1
}

Тогда я пытаюсь отобразить это так:

 render() {
    return (
  <div className='App'>
  <div className="container">
  <div className="jumbotron">
      <h4>Mtb</h4>
      <p>Trails:</p>
    </div>
    {this.state.trails.map(trail => (
        <Trails key={trail.id} 
        conditions={trail.conditionDetails}
        />
    ))
    }
  </div>
  </div>
    );
  }
}

Затем я получаю сообщение о том, что мой метод карты не является функцией Может кто-то указать, что я делаю не так?

Когда я console.log моего состояния, кажется, что он не устанавливается, может ли это быть проблемой и объяснением, почему оно не работает?

Answer 1

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

componentWillMount() {
  axios
    .get('https://www.mtbproject.com/data/get-trails-by-id?ids=2081068,830442%208013961&key=(API-KEY)')
    .then(response => this.setState({ trails: response.data.trails }));
}