努力从api获取一些数据答案

【问题标题】：Struggling to get some data from api努力从api获取一些数据
【发布时间】：2020-02-24 16:48:17
【问题描述】：

您好，我正在尝试从“货币 API”(https://exchangeratesapi.io/) 获取一些数据

这是下面的代码

App.js

import React, { useEffect, useState, Fragment } from "react";
import Header from "./Header";
import Table from "./dashboard/Table";
import { getLatest } from "../actions/currencyAction";
import { useDispatch, useSelector } from "react-redux";

function App() {
  const latest = useSelector(state => state.latest);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getLatest());
  }, []);

  return (
    <Fragment>
      <Header />
      {console.log(latest.rates)}
    </Fragment>
  );
}
export default App;

currencyAction.js

import { GET_LATEST } from "../actionType";

import axios from "axios";

export function getLatest() {
  return dispatch => {
    return axios.get("https://api.exchangeratesapi.io/latest").then(res => {
      dispatch({ type: GET_LATEST, payload: res.data });
    });
  };
}

我成功从api获取数据

<Fragment>
      <Header />
      {console.log(latest.rates)}
    </Fragment>

{CAD: 1.4372, HKD: 8.4324, ISK: 139.3, PHP: 55.248, DKK: 7.4699, …}
CAD: 1.4372
HKD: 8.4324
ISK: 139.3
PHP: 55.248
DKK: 7.4699
HUF: 337.61
CZK: 25.186
AUD: 1.6384
RON: 4.8063
SEK: 10.5833
IDR: 15098.95
INR: 77.8265
BRL: 4.7474
RUB: 70.6675
HRK: 7.465
JPY: 120.52
THB: 34.336
CHF: 1.06
SGD: 1.5164
PLN: 4.2989
BGN: 1.9558
TRY: 6.6599
CNY: 7.6102
NOK: 10.1328
NZD: 1.7095
ZAR: 16.3592

但是当我尝试访问每种货币时，一切都崩溃了..

   <Fragment>
      <Header />
      {console.log(latest.rates.CAD)}
    </Fragment>


TypeError: Cannot read property 'CAD' of undefined
App
C:/Users/82102/cb/src/components/App.js:17
  14 | 
  15 |  return (
  16 |    <Fragment>
> 17 |      <Header />
     | ^  18 |      {console.log(latest.rates.CAD)}
  19 |    </Fragment>
  20 |  );

我挣扎了一整天，但我就是不知道为什么会这样。。请分享你的知识..谢谢你

【问题讨论】：

标签： reactjs react-redux axios

【解决方案1】：

您正试图在从 API 加载之前访问 rates 上的属性。

简单的解决方案是首先检查它的存在：

确保费率真实（因为typeof null === 'object' 也是真实的），
检查类型以查看其是否为对象，
然后访问该属性。

{latest.rates && typeof latest.rates === 'object' && console.log(latest.rates.CAD)}

【讨论】：

typeof latest.rates === 'object' 是不必要的，如果 latest.rates 在准备好后只能是假值或对象。

【解决方案2】：

因为你使用console.log 作为回报会导致错误。

您应该执行以下操作：

import React, { useEffect, useState, Fragment } from "react";
import Header from "./Header";
import Table from "./dashboard/Table";
import { getLatest } from "../actions/currencyAction";
import { useDispatch, useSelector } from "react-redux";

function App() {
  const latest = useSelector(state => state.latest);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getLatest());
  }, []);

  // add here
  console.log(latest.rates)

  return (
    <Fragment>
      <Header />
      // remove below line
      // {console.log(latest.rates)}
    </Fragment>
  );
}
export default App;

【讨论】：