Javascript 上下文API问题-对象未定义

我一直在使用Redux，但我最终决定尝试使用上下文API，但显然我遗漏了一些东西。我在App.js中遇到一个错误“TypeError:Object（…）（…）未定义”，天气和细节似乎未定义

你能检查一下我的代码，帮我找出错误吗？我想我应该可以直接访问状态，而不需要进行分解。或者说，解构是唯一的出路

在这里你可以看到我的代码的所有部分-context+wrapp.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;

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;

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

const WeatherContext=React.createContext（）；
类WeatherProvider扩展组件{
状态={
查询：“”，
天气：{}，
详情：{}，
平均值：“，
模式：“，
};
//我在这里的职能
render（）{
返回(
{this.props.children}
);
}
}
const WeatherConsumer=WeatherContext.Consumer；
导出{WeatherConsumer，WeatherContext}；
导出默认天气提供商；

App.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;

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;

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 React，{useContext}来自“React”；
从“/context/MyContext”导入WeatherContext；
从“/components/Cards”导入卡片；
从“/components/Header”导入标题；
从“/components/CurrentWeather”导入CurrentWeather；
从“/components/Footer”导入页脚；
从“/components/Summary”导入摘要；
常量应用=（）=>{
const{weather，details}=useContext（WeatherContext）；
返回(
15
？“应用程序温暖”
：“应用程序冷”
：“应用程序”
}
>
{typeof details.current！=“未定义”&&(
)}
);
}
导出默认应用程序；

所有内容都包装在index.js中

Index.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;

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;

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

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/context/MyContext”导入WeatherProvider
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

我认为您没有在以下位置正确导入上下文：

import WeatherContext from "./context/MyContext";

您在其模块中以名称导出，因此需要按如下方式导入：

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

---

在

app.js

file

该死，该睡觉了。你是对的！我知道我在什么地方错过了一件小事！