TypeError: render не является функцией реагирования на хуки - PullRequest
Новая
       27

TypeError: render не является функцией реагирования на хуки

0 голосов
/ 28 января 2020

Я использовал Redux, но впервые за последние 2 дня впервые применил концепцию контекста Provider-Consumer.

Ниже приведен код, который я хочу добавить в один файл своего поставщика и потребителя. Это возможно? Если так, то подходит ли мой подход? Если нет, то где я иду не так? Я хочу потреблять значения в макете и его дочерний компонент. Правильный ли мой подход?

index. js

       ReactDOM.render(
                <Router>
                    <ClientContext.Provider value={client}>// graphQL Provider
                        <CommonProvider>      
                            <Switch>
                                <MyProvider.Consumer>{
                                        (value) =>{
                                        <Layout {...value} >
                                            <Switch>
                                                <Route exact path="/" render={props => ( 
                                                                        <Installation  {...props} />
                                                                     )} />  
                                                <Route path="/xyz" component={xyz} />
                                            </Switch>
                                        </Layout>
                                    }}
                                </MyProvider.Consumer>
                            </Switch>    
                        </CommonProvider>
                    </ClientContext.Provider>
                </Router>,
                document.getElementById('root')
                );

Provider. js

                            import React ,{ createContext,useState,useContext,useEffect } from "react";
                            import Sign from '/loginpage';

                            const MyProvider=createContext({});
                            export default MyProvider;

                            export const  CommonProvider =props=>{
                                const [value,setValue]=useState("");
                                const DataContext={value,setValue};
                                useEffect(()=>{console.log("Data Provider",value,"props",props,"DataContext",DataContext)})
                                return(
                                    <MyProvider.Provider value={DataContext}>
                                        {props.children}
                                    </MyProvider.Provider>
                                );
                            };

                            const UseHOC=WrapperComponent=>function Comp(props){
                                const dataCtx=useContext(MyProvider);
                                useEffect(()=>{console.log("propsHOC",props,"MyProvider",MyProvider,"dataCtx",dataCtx)})
                                if(value.isUser)
                                    return(            
                                        <WrapperComponent
                                        {...props}
                                        value={dataCtx.value}
                                        setValue={dataCtx.setValue}
                                        />              
                                    );
                                    else       
                                        return <Sign/>                                        
                            };

                            export { UseHOC };

Правильно ли я написал поставщика и HO C? Должен ли я поместить его в другой файл? Нужно ли мне даже HO C?

Любая помощь приветствуется. Есть ли другой способ?

...