上下文 API 問題 - object 未定義

Question

我一直在使用 Redux，但我最終決定嘗試使用 Context API，但顯然我錯過了一些東西。 我在 App.js 中收到錯誤“TypeError: Object(...)(...) is undefined”，天氣和詳細信息似乎未定義。

您能否查看我的代碼以幫助我找出錯誤？ 我想我應該可以直接訪問 state 而無需解構。 或者也許解構是 go 的唯一方法？

在這里，您可以看到我的代碼的所有部分 - 上下文 + 包裝的 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();

Answer 1

我認為您沒有正確導入上下文：

import WeatherContext from "./context/MyContext";

您在其模塊中以命名方式導出，因此您需要像下面這樣導入它：

import { WeatherContext } from "./context/MyContext";

在app.js文件中