Reactjs I'；我试图使用上下文api，但我的使用者返回值在控制台中未定义

这是我的上下文api的代码

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();
const MyContextProvider = Provider;
const MyContextConsumer = Consumer;
export { MyContextConsumer, MyContextProvider };

class UserState extends Component {
  state = {
    user: "JOHN"
  };

  render() {
    return (
      <MyContextProvider value={this.state}>
        {this.props.children}
      </MyContextProvider>
    );
  }
}

export default UserState;

import React，{Component}来自“React”；
const{Provider，Consumer}=React.createContext（）；
const MyContextProvider=提供程序；
const MyContextConsumer=消费者；
导出{MyContextConsumer，MyContextProvider}；
类UserState扩展组件{
状态={
用户：“约翰”
};
render（）{
返回(
{this.props.children}
);
}
}
导出默认用户状态；

这就是我打算使用它的地方，但它在控制台中返回未定义。我在寻求帮助。

import React from "react";
import styled from "@emotion/styled";
import { Formik, Form, Field, ErrorMessage } from "formik";

import { MyContextConsumer } from "../../context/UserStateContext";

const StyledSignUp = styled.div`
  width: 50%;
  margin: 20px auto;
`;

const SignUpForm = ({ props, ...remainProps }) => {
  return (
    <StyledSignUp {...remainProps}>
      <MyContextConsumer>
        {context => {
          console.log(context, "CONTEXT API");
          return <div className='content'>content here</div>;
        }}
      </MyContextConsumer>
    </StyledSignUp>
  );
};

export default SignUpForm;

从“React”导入React；
从“@emotion/styled”导入样式；
从“Formik”导入{Formik，Form，Field，ErrorMessage}；
从“./../context/UserStateContext”导入{MyContextConsumer}”；
const StyledSignUp=styled.div`
宽度：50%；
保证金：20px自动；
`;
const SignUpForm=（{props，…remainProps}）=>{
返回(
{context=>{
log（上下文，“上下文API”）；
在这里返回内容；
}}
);
};
导出默认注册表；

---

我想知道我在上下文代码中是否做错了什么

这里的问题是，您试图过早地对上下文进行分解。就我个人而言，我会把它分成3个文件。当您使用Git文件历史记录时，它也会有所帮助

• User.context.js（这使得导入更容易跟踪
• 提供者-通常这将是最高的节点（它确实需要它！）
• 消费者-消费价值的组件

---

User.context.js

：

import { createContext } from "react";

export const UserContext = createContext();

提供者-

：

import React，{Component}来自“React”；
从“../../User.context.js”//上下文的某个文件夹导入{UserContext}
类UserState扩展组件{
状态={
用户：“约翰”
};
render（）{
返回(
{this.props.children}
);
}
}
导出默认用户状态；

消费者-

：

import React，{useContext}来自“React”；
从“@emotion/styled”导入样式；
从“../../User.context.js”//上下文的某个文件夹导入{UserContext}
const StyledSignUp=styled.div`
宽度：50%；
保证金：20px自动；
`;
//老路
const SignUpForm=（{props，…remainProps}）=>{
返回(
{context=>{
log（“上下文API”，上下文）；
返回(
内容在这里；
);
}}
);
};
//反应钩方式：）
const SignUpForm=（{props，…remainProps}）=>{
const context=useContext（UserContext）；
返回(
内容在这里；
{/*调试-眼见为实*/}
{JSON.stringify（context，null，2）}
);
};
导出默认注册表；

---

让我知道你进展如何

请发布一个而不是一些截图@TobiasTengler很抱歉，我刚刚转载了代码。我喜欢你那样做。我昨天就可以调试了。原因是我忘了从最高的组件（我的layout.js，其中包括页眉和页脚）传递它。但真的，我刚从你这样做中学到了一些新东西。从现在起我一定会玩它。非常感谢你帮我解决这个问题。你有推特或者我可以关注的东西吗@尼尔：谢谢你的好话，我会调查一些推特账户，比如丹·阿布拉莫夫和肯特。如果你能对答案投赞成票，如果你觉得有帮助，那就太好了。

import React, { Component } from "react";

import { UserContext } from '../../User.context.js' // some folder for context's

class UserState extends Component {
  state = {
    user: "JOHN"
  };

  render() {
    return (
      <UserContext.Provider value={this.state}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

export default UserState;

import React, { useContext } from "react";
import styled from "@emotion/styled";

import { UserContext } from '../../User.context.js' // some folder for context's

const StyledSignUp = styled.div`
  width: 50%;
  margin: 20px auto;
`;

// OLD WAY
const SignUpForm = ({ props, ...remainProps }) => {
  return (
    <UserContext.Consumer>
      {context => {
        console.log("CONTEXT API", context);

        return (
          <StyledSignUp {...remainProps}>
            <div className="content">content here</div>;
          </StyledSignUp>
        );
      }}
    </UserContext.Consumer>
  );
};

// React Hook way :)
const SignUpForm = ({ props, ...remainProps }) => {
  const context = useContext(UserContext);

  return (
    <StyledSignUp {...remainProps}>
      <div className="content">content here</div>;

      {/* Debug - Seeing is believing */}
      <pre>{JSON.stringify(context, null, 2)}</pre>
    </StyledSignUp>
  );
};

export default SignUpForm;