错误，当我导入useContext到另一个组件

Question

我试图导入useContext的值，但我得到这个错误:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我错过了什么?

AllThemeContext.js

import React, { createContext, useState } from "react";
export const AllContext = createContext();
const AllContextProvider = (props) => {
const submittedInput = props.submittedInput;
return (
<AllContext.Provider value={{ submittedInput }}>
{props.children}
</AllContext.Provider>
);
};
export default AllContextProvider;

logo.js

import React from "react";
import AllContextProvider from "../context/AllThemeContext";
import "./Logo.scss";
// Component
const Logo = () => {
return (
<AllContextProvider.Consumer>
{(context) => {
console.log(context);
}}
</AllContextProvider.Consumer>
);
};
export default Logo;

Answer 1

您应该从AllThemeContext中导入AllContext，这是命名的导出，而不是默认的导出。

import React from "react";
import { AllContext } from "../context/AllThemeContext";
import "./Logo.scss";
// Component
const Logo = () => {
return (
<AllContext.Consumer>
{(context) => {
console.log(context);
}}
</AllContext.Consumer>
);
};
export default Logo;

Answer 2

因为你在AllContextProvider.Consumer的子元素中没有返回任何东西。

你需要添加返回组件:

{(context) => {
console.log(context);
return <div>Hello world</div>
}}