Question

我正在尝试提取数据=>加密货币汇率。请参阅此处的API规范：https://rapidapi.com/coingecko/api/coingecko?endpoint=apiendpoint_a6893c7b-2094-4a19-9761-0c0306fe741a，但出现 TypeError：无法读取未定义的属性'map'

错误：

  32 | 
  33 | return (
> 34 |   <ul>
     | ^  35 |     { this.state.rates.map(i => <li>{i.data.rates}</li>)}
  36 |   </ul>
  37 | )

代码：

import React from 'react';
import './App.css';
import prettyFormat from 'pretty-format';
import axios from 'axios';

class App extends React.Component {

  state = {
    rates: []
    }

  componentDidMount() {

    axios({
      "method":"GET",
      "url":"https://coingecko.p.rapidapi.com/exchange_rates",
      "headers":{
      "content-type":"application/octet-stream",
      "x-rapidapi-host":"coingecko.p.rapidapi.com",
      "x-rapidapi-key":"f4756b8409msh762478a357cd070p10685fjsnce9080fa5478"
      }
      })
      .then((response)=>{
        console.log(response)
      })
      .then(rates => this.setState({ rates}))

  }

    render() {
      console.log(prettyFormat(this.state.data))

      return (
        <ul>
          { this.state.rates.map(i => <li>{i.data.rates}</li>)}
        </ul>
      )

    }
}

export default App;```

Answer 1

据我所知，您对回复的处理不正确。您链接了两个then语句。您可能需要在第一个then中访问费率数据并将其设置为状态：

  componentDidMount() {

    axios({
      "method":"GET",
      "url":"https://coingecko.p.rapidapi.com/exchange_rates",
      "headers":{
      "content-type":"application/octet-stream",
      "x-rapidapi-host":"coingecko.p.rapidapi.com",
      "x-rapidapi-key":"f4756b8409msh762478a357cd070p10685fjsnce9080fa5478"
      }
      })
      .then((response)=>{
        console.log(response)
        //response is an object with a data property that contains the rates
        const { rates } = response.data;
        this.setState({ rates }
      })
  }

我不确定您使用的API是什么，但是您还应该考虑注意未定义response.data.rates的情况。在上述代码中，码率将等于undefined，并且没有map属性。

例如，您可以检查费率是否是期望的数组。

Answer 2

Axios的响应返回一个Promise，但是使响应变得令人安慰的诺言却没有。因此，您基本上将状态设置为{rates: undefined}。这就是为什么您在渲染中遇到该错误的原因。我认为您可以按照Gegenwind的建议去做，也可以通过响应来解决承诺，而不仅仅是安慰它。

ReactJs-TypeError：无法读取未定义的属性“ map”

2 个答案: