Javascript 当使用连接函数向Hoc提供状态时，响应给出错误

大家好，我想使用带有auth HOC的来决定主页是应该呈现为仪表板还是来宾主页。此外，我想将此逻辑与其他组件一起使用，以实现。 但每当我尝试使用映射状态将我的hoc连接到它返回的道具时，我就会遇到错误

TypeError:对象（…）不是函数

img：-

。我看到了其他类似的stackOverflow解决方案，但没有一个能够清除我的错误。

我也尝试过使用compose，但即使这样也没有成功。如果我删除了connect，它也会像charm一样工作。但是我需要在我的hoc中使用redux状态。我还想过使用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))

//此文件负责处理路由逻辑
从“React”导入React，{useffect}
从“react redux”导入{connect}
从“react router dom”导入{Switch，withRouter，Route，useLocation}
从“../components/Home”导入Home
从“../components/Auth”导入身份验证
从“../stores/action/auth”导入authUser
从“../stores/action/error”导入{clearError}
从“../hocs/WithAuth”导入WithAuth
主功能（道具）{
让location=useLocation（）；
让clearError=props.clearError
设{error，currentUser}={props}
useffect（（）=>{
}，[location.pathname，currentUser]）
const NewComponent=WithAuth（Home）；
返回(
)
}
函数MapStateTops（状态）{
返回(
{
…州
}
)
}
使用路由器导出默认值（connect（mapStateToProps，{authUser，clearError}）（主））

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)

import React，{Component}来自“React”
从“react redux”导入{connect}
具有身份验证的函数（Comp）{
返回类扩展了React.Component{
render（）{
如果（此.props.isAuthenticated）{
返回（成功！）
}
否则{
返回(
) 
}
}
}
}
函数MapStateTops（状态）{
返回({
isAuthenticated:state.currentUser.isAuthenticated
}
)
}
导出默认连接（MapStateTops，null）（WithAuth）

好的，我发现了错误。这就是我做错的：-->

不知何故，我假设HOC本身是一种组件类型，这就是为什么我将connect映射为HOC-it-self。但我发现hoc只是一个函数，它返回的组件在我的例子中就是我返回的类

所以我应该用状态映射类组件，而不是HOC组件本身。

这就是为什么我支持连接是给予的问题。虽然我不能说这是确切的原因，但它确实解决了问题。同样对于那些熟悉redux hooks 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 

import React，{Component}来自“React”
从“react redux”导入{connect}
具有身份验证的函数（Comp）{
类HOC扩展了React.Component{
render（）{
如果（此.props.isAuthenticated）{
返回（成功！）
}
否则{
返回(
) 
}
}
}
函数MapStateTops（状态）{
返回(
{
isAuthenticated:state.currentUser.isAuthenticated
}
)
}
//**退货应在HOC内**
返回连接（MapStateTops，null）（HOC）
}
使用auth导出默认值

好的，我发现了错误。这就是我做错的：-->

不知何故，我假设HOC本身是一种组件类型，这就是为什么我将connect映射为HOC-it-self。但我发现hoc只是一个函数，它返回的组件在我的例子中就是我返回的类

所以我应该用状态映射类组件，而不是HOC组件本身。

这就是为什么我支持连接是给予的问题。虽然我不能说这是确切的原因，但它确实解决了问题。同样对于那些熟悉redux hooks 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 

import React，{Component}来自“React”
从“react redux”导入{connect}
具有身份验证的函数（Comp）{
类HOC扩展了React.Component{
render（）{
如果（此.props.isAuthenticated）{
返回（成功！）
}
否则{
返回(
) 
}
}
}
函数MapStateTops（状态）{
返回(
{
isAuthenticated:state.currentUser.isAuthenticated
}
)
}
//**退货应在HOC内**
返回连接（MapStateTops，null）（HOC）
}
使用auth导出默认值

这是我提到的文章：-->这是我提到的文章：-->