因此，我希望使用react context api在两个子组件之间传递数据，但它显示以下错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查的渲染方法 App . 这是我的密码
app.js

import React,{ MyProvider} from 'react'
import {BrowserRouter as Router, Switch,Route} from 'react-router-dom'
import Login from './Login';
import Home from './Home';
import UserInfo from "./UserInfo";
import SetInfo from './SetInfo';

export default class App extends React.Component{

   render (){

    return(

      <Router>
        <Switch>
          <Route  path = "/" exact={true} component={Home}/>
          <Route  path = "/Login"   component = {Login}/>
          <Route  path = "/UserInfo" component = {UserInfo}/>
          <Route  path = "/SetInfo" component = {SetInfo}/>
        </Switch>
           <div>
            <MyProvider>
              <div className="App">
               <SetInfo/>
                <UserInfo/>
              </div>
               </MyProvider>
            </div>
      </Router>

    )
   }

}

myprovider.js

import React,{Component} from 'react'

 export const MContext = React.createContext();  //exporting context object
   class MyProvider extends Component {
state = {message: ""}
render() {
        return (
            <MContext.Provider value={
            {   state: this.state,
                setMessage: (value) => this.setState({
                            message: value })}}>
            {this.props.children}   //this indicates that all the child tags with MyProvider as Parent can access the global store.
            </MContext.Provider>)
    }
}
export default MyProvider;

setinfo.js

import React, {useState,MyProvider} from 'react';
import { Button} from 'semantic-ui-react'
import UserInfo from "./UserInfo";

import { MContext } from './MyProvider';

import './SetInfo.css'

function SetInfo(props){

    const [State, setState] = useState("");

    const handleChange = (event) => {
        setState(event.target.value);
    }

    const sendMessage = () =>{
        setState(State)
    }

    return(
        <div>
            <div className="dots"> 
              <span class="dot" id="dot1"></span>
              <span class="dot" id="dot2"></span>
              <span class="dot" id="dot3"></span>
            </div>
            <div className="title">
                <h1>{props.location.user}</h1>
            </div>
            <hr></hr>
            <h2>Modifier les informations de l'utilisateur</h2>
            <form class="ui form">
            <textarea placeholder="Tell us more" rows="2" onChange={handleChange}>
            </textarea></form>
            <div>
             <MContext.Consumer>
               {(context)=>(
                   <button onClick={()=>{context.sendMessage()}}>Send</button>
               )

               }  
             </MContext.Consumer>
            </div>

        </div>
    )

}
export default SetInfo;