Изо всех сил, чтобы получить некоторые данные из API

Question

Привет, я пытаюсь получить некоторые данные из "API валюты" (https://exchangeratesapi.io/)

, и это код ниже

Приложение. 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

, но когда я пытаюсь получить доступ к каждой валюте, Everthing коллапс ..

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

Я боролся целый день, но я просто не могу понять, почему это происходит .. Пожалуйста, поделитесь своими знаниями .. спасибо

Answer 1

Вы пытаетесь получить доступ к свойству на rates до его загрузки из API.

Простое решение - сначала проверить его существование:

• Убедитесь, что ставки верны (поскольку typeof null === 'object' также верно),
• Проверьте тип, чтобы увидеть если это объект,
• Затем получите доступ к свойству.

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

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