Реагировать на ошибку при использовании функции подключения для предоставления состояния Hoc

Question

Привет всем, я хочу использовать с AUTH HO C, чтобы решить, следует ли отображать homePage как панель инструментов или как гостевую HomePage. Далее я хочу использовать эту логику c с другими компонентами. Но я застреваю с ошибкой всякий раз, когда я пытаюсь подключить свой ho c, используя состояние карты для поддержки, он возвращает

TypeError: Object (...) не является функцией

img: -

. Я видел другие подобные решения stackOverflow , но ни одно из них не могло очистить мою ошибку.

Я пытался использовать compose, но даже это не сработало. Если я удалить соединение это работает как шарм. Но мне нужно было бы избыточное состояние в моем ho c. Кроме того, я подумал об использовании хуков React-Redux, но сейчас я просто хочу упростить процесс.

Main. js

// this file is responsible for handling routes logic 
import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {Switch , withRouter, Route,useLocation} from 'react-router-dom'
import Home from '../components/Home'
import Auth from '../components/Auth'
import authUser from '../stores/action/auth'
import {clearError} from '../stores/action/error'
import WithAuth from '../hocs/withAuth'


function Main(props){
   let location=useLocation();
    let clearError=props.clearError
    let {error,currentUser}={props}
   useEffect(()=>{

   },[location.pathname,currentUser])



   const NewComponent=WithAuth(Home);
    return(
        <Switch>
            <Route exact path="/" >
                <NewComponent />    
            </Route>


            <Route exact path="/signUp">
                 <Auth heading={"Welcome to warbler"} isAuthenticated={props.currentUser.isAuthenticated} error={props.error} signUp={true} buttonText="Sign Up" />
            </Route> 
            <Route exact path="/login">
                 <Auth authUser={props.authUser} isAuthenticated={props.currentUser.isAuthenticated} error={props.error} signUp={false} heading={"Welcome Back :)"} buttonText="Log In" />
            </Route>
        </Switch>
    )
}




function mapStateToProps(state){
    return (
        {
          ...state
        }
    )
}


export default withRouter(connect(mapStateToProps,{authUser,clearError})(Main))

WithAuth. js

import React , {Component} from 'react'
import {connect} from 'react-redux'
function WithAuth(Comp){
    return class  extends React.Component{

        render(){

                    if(this.props.isAuthenticated){
                        return (<div>Sucess!</div>)
                    }
                    else{
                        return (
                            <Comp {...this.props} />
                    ) 

                    }


        }
    }

}

function mapStateToProps(state){
    return({
        isAuthenticated:state.currentUser.isAuthenticated
    }
    )
}

 export default connect(mapStateToProps,null)(WithAuth)

Answer 1

Хорошо, я понял ошибку. Это то, что я сделал неправильно: ->

Я почему-то предположил, что HO C сам по себе является типом компонента, и поэтому я отображал свое соединение с HO C самостоятельно. Но я обнаружил, что ho c - это просто функция, возвращающая компонент, который в моем случае был классом, который я возвращал.

Таким образом, я должен был сопоставить свой компонент класса с состоянием, а не с самим компонентом HO C.

Вот почему я отключил соединение давал проблему. Хотя я не могу сказать, что это была точная причина, но это определенно решило проблему. Также для тех, кто знаком с API редукционных хуков, мы можем использовать здесь - useSelector () , хотя причина, по которой я этого избегал, заключалась в том, что это было много повторного рендеринга.

Вот правильный код для HO C

import React , {Component} from 'react'
import {connect} from 'react-redux'

 function WithAuth(Comp){
     class HOC extends React.Component{

    render(){

                if(this.props.isAuthenticated){
                    return (<div>Sucess!</div>)
                }
                else{
                    return (
                        <Comp {...this.props} />
                ) 

                }


    }
}

function mapStateToProps(state){
    return(
        {
        isAuthenticated:state.currentUser.isAuthenticated
    }
    )
}

// **RETURN SHOULD BE INSIDE HOC**
return connect(mapStateToProps,null)(HOC)


}

export default WithAuth