TypeError：当我使用React Context API

Question

我在项目中使用React Context API

步骤：1 在我的项目中，首先创建一个createContext API一个单独的文件。

fileName Contextapi.js

import React from 'react'

// createcontext  api here
const MyContext = React.createContext();

// create MyContext provider
export const Provider = MyContext.Provider;

// create MyContext Consumer
export const Consumer = MyContext.Consumer;

---

步骤：2  使用contextApi向MyContext提供程序组件提供状态数据

import React, { Component,Fragment } from 'react'
// all import component from bootstrap
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Row from 'react-bootstrap/Row'
import Image from 'react-bootstrap/Image'
import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
import Dropdown from 'react-bootstrap/Dropdown'

// MyContextProvider from Contextapi.js 

import { Provider } from "./Contextapi";

// own scss file 
import './Css/Header.scss'


export default class Header extends Component {

    // state here
    state={
        navIcon: true,
        raj:'deep'
    }

    // onClick function
    clickIcon=()=>{
        this.setState({

            navIcon: false
        })

    }

    // render
    render() {

        return (
                            // use MyContextProvider here add state value
                <Fragment>
                   <Provider value={this.state.navIcon} >

                       {/* rest header code from bootstrap  */}

                        <header className=" align-middle">

                            <Container  fluid={true}>

                                    <Row>
                                            <Col className="divone  d-flex"  xs={6} sm={6} md={4} lg={6} xl={8} >
                                                    <i onClick={this.clickIcon} class=" d-block d-sm-block d-md-none fas fa-bars"></i>
                                                    <h2> Dashboard.</h2>
                                            </Col>

                                            <Col  xs={6} sm={6} md={8} lg={6} xl={4} >

                                                    <ButtonToolbar className="float-right mr-5">
                                                            {/* bootstrap drodown component */}
                                                                    <Dropdown>
                                                                        <Dropdown.Toggle id="dropdown-custom-1"><Image src="https://source.unsplash.com/user/erondu/171x180
                                                                    "  roundedCircle />
                                                                        </Dropdown.Toggle>
                                                                        <Dropdown.Menu className="super-colors">
                                                                        <Dropdown.Item eventKey="1">Home</Dropdown.Item>
                                                                        <Dropdown.Item eventKey="2">Dashboard</Dropdown.Item>
                                                                        <Dropdown.Item eventKey="3" >
                                                                            Active Item
                                                                        </Dropdown.Item>
                                                                        </Dropdown.Menu>
                                                                    </Dropdown>
                                                    </ButtonToolbar>

                                            </Col>
                                    </Row>

                            </Container>

                        </header>
                        {/* End Here */}
                    </Provider>

                </Fragment>  
        )
    }
}

---

步骤：3 检索数据以使用消费者组件

import React,{Fragment} from 'react';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'

// import Consumer from Contextapi.js for use here
import { Consumer } from "./Contextapi";

import './Css/Main.scss'




 const Sidebar = (props) => {


        return (
                <Fragment> 
                  {/* use here Consumer component */}
                        <Consumer>

                                 {/* Nav bar form bootstrap */}
                                <Navbar  className="d-flex flex-column" expand="lg">
                                             <Nav className="mr-auto d-flex flex-column">

                                                        {/* ---------- Main Code ------ */}

                                                  {/* for testing  so write here a function receive data form  provider API
                                                 But Not work  */}

                                                 { (data)=> {
                                                  return  <Nav.Link href="#home6"> {data} </Nav.Link>      
                                                 }   }

                                                                {/* Rest code form bootstrap  */}
                                                <Nav.Link href="#home1">Home</Nav.Link>
                                                <Nav.Link href="#link1">Link2</Nav.Link>
                                                <Nav.Link href="#home2">Home</Nav.Link>
                                                <Nav.Link href="#link2">Link</Nav.Link>
                                                <Nav.Link href="#home3">Home</Nav.Link>
                                                <Nav.Link href="#link3">Link</Nav.Link>
                                                <NavDropdown className=" d-flex flex-column" title="Dropdown" id="basic-nav-dropdown">
                                                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                                </NavDropdown>
                                                <Nav.Link href="#home4">Home</Nav.Link>
                                                <Nav.Link href="#link4">Link</Nav.Link>
                                                <Nav.Link href="#home5">Home</Nav.Link>
                                                <Nav.Link href="#link5">Link</Nav.Link>
                                                </Nav>

                                 </Navbar>

                        </Consumer>
                        {/* end consume component  */}
                </Fragment>

                //  End Fragment  

        )
}

export default  Sidebar

文件夹结构查看此图片

---