使用時反應給出錯誤連接 function 以提供 state 到 Hoc

Question

大家好，我想使用withAuth HOC來決定主頁應該呈現為儀表板還是訪客主頁。 此外，我想將此邏輯與其他組件一起使用。 但是每當我嘗試使用 map state 連接我的 hoc 到它返回的道具時，我都會遇到錯誤

類型錯誤：對象（...）不是 function

圖像：-

. 我看到了其他類似的 stackOverflow 解決方案，但沒有一個可以清除我的錯誤。

我也嘗試使用 compose，但即使這樣也沒有成功。如果我刪除連接，它就像魅力一樣。但我需要 redux state 在我的 hoc 中。 我也想過使用 react-redux 的鈎子，但我現在只想保持簡單。

主.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

好的，我發現了錯誤。 這是我做錯的：-->

我以某種方式假設 HOC 本身是一種組件類型，這就是為什么我將我的連接映射到自己的 HOC。 但我發現 hoc 只是一個 function 返回組件，在我的情況下是我返回的 class。

所以我應該將我的 class 組件映射到 state 而不是 HOC 組件本身。

這就是為什么我認為連接有問題。 以為我不能說這是確切的原因，但它確實解決了問題。 對於那些熟悉 redux 鈎子 api 的人來說，我們可以在這里使用--useSelector()雖然我避免它的原因是因為它有很多重新渲染。

這是HOC的正確代碼

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