在反应“速率”中出现错误未定义 no-undef

Question

我正在尝试使用我以前从未尝试过的 Axios 从 API 渲染一些数据，但我非常不知所措，我有点像代码初学者，所以请多多包涵。

下面是 App.js 组件，没什么可看的，我只是在渲染完成所有工作的组件

import './App.css';
import React from 'react'
import Rates from './Component/Rates';


function App() {


  return (
    <div className="App">
    
        <Rates/>
        
      </div>   
  );
}


export default App;

然后下面是我尝试从 API 呈现数据的组件费率

import React , { useState } from 'react'
import axios from 'axios';


class Rates extends React.Component {

    state = {
        rates: {},
      };

      componentDidMount(){
        axios.get(``)
          .then(res => {
              console.log(res);
            this.setState({ rates: res.data });
          })
          
      }

    render(){
        return (
            
         
            <div>
                <h1>Exchange rates </h1>
                <button >Exchange rates</button>  
                
                  <ul>
                      {this.state.rates.map(rate => <li>{rates}</li>)}
                  </ul>
                    <h4>convert rates</h4>
                    <input></input> <br></br>
                    <input></input>
                
            </div>
        )
    }
}

export default Rates

不断出现未定义错误的行是这一行

{this.state.rates.map(rate => <li>{rates}</li>)}

不太清楚发生了什么，因为我阅读了无数文章并观看了一两个视频。

我还可以补充一点吗

rates: {};

是一个带有键值对的 object，所以我想也许我需要将我的 object 转换为一个数组，但即使我对 Axios 也不太确定。

任何帮助将不胜感激！

Answer 1

首先，您不能在 javascript 中使用 map 和 object。 您可以 map arrays。 在您的构造函数中更改rates: []以避免该错误。 然后您的 axios 指向它的默认目标，因为您没有指定获取的地址。 也许在您的控制台中查看“res”中实际包含哪些数据。

Answer 2

我在这里做了一些编辑： https://codesandbox.io/s/still-wood-gcr0o?file=/src/App.js

总结一下我做过的事情：

1. 在 componentDidMount 中使用 async/await 因为获取数据是异步的
2. 请求接收到的数据在一个object中，不是数组，所以不能直接在上面使用.map。 您必须将此 object 转换为数组。
3. 这是一个 object 所以我必须编辑 JSX 以匹配显示的数据和收到的数据。