javascript - 上下文 API 问题 - 对象未定义
问题描述
我一直在使用 Redux,但我最终决定尝试使用 Context API,但显然我错过了一些东西。我在 App.js 中收到错误“TypeError: Object(...)(...) is undefined”,天气和详细信息似乎未定义。
您能否查看我的代码以帮助我找出错误?我认为我应该可以直接访问状态而不需要解构。或者也许解构是唯一的出路?
在这里,您可以看到我的代码的所有部分 - 上下文 + 包装的 app.js。
MyContext.js
const WeatherContext = React.createContext();
class WeatherProvider extends Component {
state = {
query: "",
weather: {},
details: {},
mean: "",
mode: "",
};
//my functions here
render() {
return (
<WeatherContext.Provider
value={{
...this.state,
search: this.search,
meanValue: this.meanValue,
ModeValue: this.modeValue,
}}
>
{this.props.children}
</WeatherContext.Provider>
);
}
}
const WeatherConsumer = WeatherContext.Consumer;
export { WeatherConsumer, WeatherContext };
export default WeatherProvider;
应用程序.js
import React, { useContext } from "react";
import WeatherContext from "./context/MyContext";
import Cards from "./components/Cards";
import Header from "./components/Header";
import CurrentWeather from "./components/CurrentWeather";
import Footer from "./components/Footer";
import Summary from "./components/Summary";
const App = () => {
const { weather, details } = useContext(WeatherContext);
return (
<div
className={
typeof details.current != "undefined"
? weather.list[0].main.temp > 15
? "app warm"
: "app cold"
: "app"
}
>
<main>
<Header />
{typeof details.current != "undefined" && (
<>
<CurrentWeather />
<Cards />
<Summary />
<Footer />
</>
)}
</main>
</div>
);
}
export default App;
一切都包含在 index.js 中。
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import WeatherProvider from "./context/MyContext"
ReactDOM.render(
<WeatherProvider>
<App />
</WeatherProvider>,
document.getElementById('root')
);
serviceWorker.unregister();
解决方案
我认为您没有正确导入上下文:
import WeatherContext from "./context/MyContext";
您在其模块中以命名方式导出,因此您需要像下面这样导入它:
import { WeatherContext } from "./context/MyContext";
在app.js
文件中