React Context api，我无法从上下文获取对象

Question

I started to learn React, I'm trying to retrieve data from api, the data is an object with the fields of base, date & rates , without any problem I can print and logout base & date but rates which is an object not.

console.log gives undefined, when trying to iterate is obviously that the object does not exist but in DevTools i can see normal data

Thank you for your help and greetings

Context:

export const ExchangeProvider = props => {
const [lastestExchanges, setLastestExchanges] = useState({})

const fetchLastestExchange = async () => {
    try {
        await fetch(`https://api.exchangeratesapi.io/latest`).then(data => data.json()).then(data => setLastestExchanges(data))
    } catch (err) {
        console.log(err)
    }
}

useEffect(() => {
    fetchLastestExchange()
}, [])

return (
    <ExchangeContext.Provider value={[lastestExchanges, setLastestExchanges]}>
        {props.children}
    </ExchangeContext.Provider>
)
}

Usage:

import React, {useState, useContext} from "react";
import {ExchangeContext} from "../ExchangeContext";

function HomeView() {
    const [lastestExchange, setLastestExchange] = useContext(ExchangeContext)
    console.log(lastestExchange)
    return (
        <div className="container">
            <p>{lastestExchange.base}</p>
            <p>{lastestExchange.date}</p>
            {/*<p>{lastestExchange.rates['PLN']}</p>*/}
            <ul>
                {/*{Object.keys(lastestExchange.rates).map(key => <li>{lastestExchange.rates[key]}</li>)}*/}
            </ul>
        </div>
    )
}

export default HomeView

Provider usage:

import React from 'react';
import HomeView from "./Views/HomeView";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import {ExchangeProvider} from "./ExchangeContext";

function App() {
    return (
        <ExchangeProvider>
            <div className="App container w-full flex h-full">
                <Router>
                    <Switch>
                        <Route path="/">
                            <HomeView/>
                        </Route>
                    </Switch>
                </Router>
            </div>
        </ExchangeProvider>
    );
}

export default App;

Answer 1

You can use react context simpler like this :

// src/ThemeContext.js
 
import React from 'react';
 
const ThemeContext = React.createContext(null);
 
export default ThemeContext;

// src/ComponentA.js
 
import React from 'react';
import ThemeContext from './ThemeContext';
 
const A = () => (
  <ThemeContext.Provider value="green">
    <D />
  </ThemeContext.Provider>
);

// src/ComponentD.js
 
import React from 'react';
import ThemeContext from './ThemeContext';
 
const D = () => (
  <ThemeContext.Consumer>
    {value => (
      <p style={{ color: value }}>
        Hello World
      </p>
    )}
  </ThemeContext.Consumer>
);