reactjs - 如何修改“渲染”以查看费率？

Question

每个人！我正在尝试将汇率从服务器呈现到我的页面。这是我的反应代码：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            exRates: []
        };
    }
    getCurrencyRatesFromDB = () => {
        fetch('https://api.exchangeratesapi.io/latest')
           .then((response) => {
             console.log('then 1', response);
            return response.json();                                                                     
        }).then((data) => {
            console.log('then 2', data);
            this.setState({
                exRates: data.rates
            });
        });
    }

    render() {
        console.log('render started');
        return (
            <div>
                console.log('return started'),
                <button 
                    type="button" 
                    className="btn"
                    onClick={() => {
                        this.getCurrencyRatesFromDB();                                          
                    }}
                    >
                        Load rates
                </button>
                <p>{this.state}</p>
        </div>        
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

如何修改“渲染”部分以查看列中的费率，就像它在服务器上一样？非常感谢您提前！

Answer 1

要添加到穆罕默德的答案，您需要遍历一个Object，而不是一个Array，并且您不能map遍历一个对象。你必须使用Object.keys它。

  {exRates
    ? Object.keys(exRates).map((elem, i) => {
        return (
          <>
            <span key={i}>
              {[elem]} :{exRates[elem]}
            </span>
            <br />
          </>
        );
      })
    : null}

,里面是键的名称，Object.keys(exRates)也是键的值。elemexRates[elem]

Answer 2

在您的渲染方法中，map状态为：

render() {
        console.log('render started');
        return (
            <div>
                {this.state.exRates.map(rate => {
                   return <div>{rate.toString()}</div>
                 })}
                <button 
                    type="button" 
                    className="btn"
                    onClick={() => {
                        this.getCurrencyRatesFromDB();                                          
                    }}
                    >
                        Load rates
                </button>
                <p>{this.state}</p>
        </div>        
        )
    }