React上下文消费者被多个儿童错误

Question

我只是尝试使用React Provider，但我以某种方式得到了此错误：index.js：1437警告：上下文消费者被多个孩子或一个不是功能的孩子渲染。上下文消费者期望单个孩子是一个功能。如果您确实通过了功能，请确保周围没有落后或领先的空格。

这是context.js

import React, { Component } from 'react'
    const Context=React.createContext()
    class Providerr extends Component {
    state={display:false}
    displayeditor=()=>{this.setState({display:!this.state.display})  }
    render() { return (
      <Context.Provider value={{...this.state,displayeditor:this.displayeditor  }}>
          {this.props.children}
      </Context.Provider>
    )
  }
}
    const Consumer=Context.Consumer
export {Providerr,Consumer}

我想在下面食用

import React, { Component } from 'react'
import {NavLink} from "react-router-dom"
import "./leagues.scss"
import {Consumer} from "./context.js"
export default class Navbar extends Component {
  render() {
    return (
        <nav className="navbar navbar-expand-lg">
           <a className="navbar-brand" href="#Home">
             <img src="./images/customLogo.jpg" className="navlogo"/>
           </a>        
           <div className="collapse navbar-collapse">
             <ul className="navbar-nav mx-5"> 
             <NavLink to="/">
             <li className="nav-item active mr-5">
               <div className="nav-link">
                 <span>Home</span>
               </div>  
             </li>
             </NavLink>
             <Consumer> {value =>      
             <li onClick={value.displayeditor}  className="nav-item mr-5">
               <div className="nav-link modal_lig" href=""> 
                 <span>Leagues</span>    
               </div>  
             </li> }
            </Consumer>
         </nav>     
 )}}

Answer 1

在Consumer中包装整个代码，如下所示。另请注意，您的某些HTML元素未正确关闭。

    import React, { Component } from 'react'
import {NavLink} from "react-router-dom"
import "./leagues.scss"
import {Consumer} from "./context.js"
export default class Navbar extends Component {
    render(){
        return(
            <Consumer> 
                {value => (
                    <nav className="navbar navbar-expand-lg">
                        <a className="navbar-brand" href="#Home">
                            <img src="./images/customLogo.jpg" className="navlogo"/>
                        </a>        
                        <div className="collapse navbar-collapse">
                            <ul className="navbar-nav mx-5"> 
                                <NavLink to="/">
                                    <li className="nav-item active mr-5">
                                        <div className="nav-link">
                                            <span>Home</span>
                                        </div>  
                                    </li>
                                </NavLink>
                                <li onClick={()=>value.displayeditor()}  className="nav-item mr-5">
                                    <div className="nav-link modal_lig" href=""> 
                                        <span>Leagues</span>    
                                    </div>  
                                </li>
                            </ul>
                        </div>
                    </nav> 
                )} 
            </Consumer>
        )
    }
}