Javascript React-Context-api，我可以'；无法从上下文获取对象

我开始学习React，我试图从api检索数据，数据是一个带有

base、date和rates

字段的对象，没有任何问题，我可以打印和注销

base和date

，但

rates

不是一个对象

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

export const ExchangeProvider=props=>{
const[lastestExchanges，setLastestExchanges]=useState（{}）
const fetchLastestExchange=async（）=>{
试一试{
待命(`https://api.exchangeratesapi.io/latest`).then（data=>data.json（））.then（data=>setLastestExchanges（data））
}捕捉（错误）{
console.log（错误）
}
}
useffect（（）=>{
fetchLastestExchange（）
}, [])
返回(
{props.children}
)
}

用法：

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，{useState，useContext}来自“React”；
从“./ExchangeContext”导入{ExchangeContext}；
函数HomeView（）{
常量[LastTestExchange，SetLastTestExchange]=useContext（ExchangeContext）
console.log（lastestExchange）
返回(
{lastestExchange.base}

{lastestExchange.date}

{/*{lastestExchange.rates['PLN']}
*/}

{/*{Object.keys（lastestExchange.rates）.map（key=>
{lastestExchange.rates[key]}
）}*/}

)
}
导出默认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;

从“React”导入React；
从“/Views/HomeView”导入HomeView；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
从“/ExchangeContext”导入{ExchangeProvider}；
函数App（）{
返回(
);
}
导出默认应用程序；

您可以这样使用：

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

//src/ComponentA.js
从“React”导入React；
从“/ThemeSecontext”导入ThemeSecontext；
常数A=（）=>(
);

//src/ComponentD.js
从“React”导入React；
从“/ThemeSecontext”导入ThemeSecontext；
常数D=（）=>(
{value=>(

你好，世界

)}
);

请同时说明如何使用

ExchangeProvider

。您是否在HomeView中看到两个`console.log（）`s？是的，我将在2分钟后向您展示。您确定函数中没有两个console.log吗？通过“在devtools中我看到正常数据”，您是指React devtools吗？如果是，哪个组件显示了这一点？如果您查看HomeView及其上下文值，它会显示什么？有错误吗？这回答了你的问题吗？如何在上下文文件中导出实际上下文本身？

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