使用 axios 处理我的 JSON 数据时遇到问题

Posted 2023-03-07

【中文标题】使用 axios 处理我的 JSON 数据时遇到问题

【英文标题】：Having issues using axios to handle my JSON data

【发布时间】：2019-04-01 04:51:30

【问题描述】：

我正在尝试从这些数据中设置状态，

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

然后我收到一条错误消息，指出我的 map 方法不是函数。有人可以指出我做错了什么吗？

当我 console.log 我的状态时，它似乎没有被设置，这可能是问题所在并解释了它为什么不起作用？

【问题讨论】：

您没有访问响应数据中的 trails 属性，只是命名无用的参数。

【参考方案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 ));

【讨论】：

谢谢你，Tholle！