index. js: 1 Предупреждение: потребитель контекста был визуализирован с несколькими дочерними элементами или дочерним элементом, который не является функцией - PullRequest
Новая
       4

index. js: 1 Предупреждение: потребитель контекста был визуализирован с несколькими дочерними элементами или дочерним элементом, который не является функцией

0 голосов
/ 06 мая 2020

я действительно складываюсь с этой ошибкой и перепробовал так много методов

Предупреждение: потребитель контекста был визуализирован с несколькими дочерними элементами или дочерним элементом, который не является функцией. Потребитель контекста ожидает, что единственный дочерний элемент является функцией. Если вы передали функцию, убедитесь, что вокруг нее нет конечных или ведущих пробелов.

это файл навигационной панели 

       import React, {Component} from 'react'
import {Themecontexte} from '../contexte/themecontexte'
import {Authocontexte} from '../contexte/authcontext'


class  Nav extends Component {
    //static contextType = Themecontexte 
    render() { 
        return ( //with this method we don t put this.context
            <Authocontexte.Consumer>
            {(authhh)=>( //this should be at the top which have this ()
            <Themecontexte.Consumer>
            {(themmm)=>
            {const {islightt,light,dark} = themmm
                /**!!! the when distructuring the ibjects should have the same name  */

             const theme = islightt ? light  : dark 
              const {isvalide , handletoggleauth} = authhh
            return(
            <nav style={{background : theme.ui , color : theme.syntax}} >
            <h4>contexte app</h4>
            <div onClick={handletoggleauth}>
                  { isvalide ? 'logged in' : 'not logged actually' }
            </div> 

                <ul>
                    <li>first one </li>
                    <li>second one </li>
                    <li>third one </li>
                    <li>fourth one </li>
                </ul>
            </nav>
         )
        }} </Themecontexte.Consumer>
        )}</Authocontexte.Consumer>
        )
    }
}
export default Nav

это файл контекста автора 

        import React, {Component,createContext} from 'react';

            export const Authocontexte = createContext()

            class Authprovider extends Component {
                state = { 
                    isvalide : true
                 }
                 handletoggleauth = () =>{
                    this.setState({
                        isvalide : !this.state.isvalide
                    })
                }
                render() { 
                    return ( 
                        <Authocontexte.Provider >{/*value={{...this.state , handletoggleauth: this.handletoggleauth}}*/}
                        {this.props.children}
                        </Authocontexte.Provider>
                     )
                }
            }

            export default Authprovider

'' 'это файл контекста темы' '' 

         import React, {Component,createContext}from 'react';
        export const Themecontexte = createContext()

        class ThemecontexteProvider extends Component{
             state = {
                    islightt : true,
                    light : { syntax : '#555' , ui : '#ddd' , bg : '#eee'},
                    dark: { syntax: '#ddd', ui: '#333', bg: '#555'}
            }
            handletoggle = () =>{
                this.setState({ islightt : !(this.state.islightt) })
            }
            render(){
                return (
                    <Themecontexte.Provider value={{...this.state, handletoggle: this.handletoggle}}>
                    {this.props.children }
                    </Themecontexte.Provider>
                )
            }
        }
        export default ThemecontexteProvider
...