React Context api，我无法从context访问对象

Question

我开始学习React，我正在尝试从api中检索数据，这些数据是一个带有base, date & rates字段的对象，我可以打印和注销base & date，但rates不是一个对象。

console.log给出了未定义的，当尝试迭代时，显然是对象不存在，但在DevTools中我可以看到正常数据

感谢您的帮助和问候

上下文：

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

用法：

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

提供程序用法：

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

您可以像这样简单地使用react上下文：

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