[我正在尝试将使用Container
的Redux
与也使用HOC
的Redux
换行,将我带到以下错误:
TypeError: Object(...) is not a function
> 112 | export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))
我一直在尝试自己解决问题,我想该解决方案与导出我的compose
或redux
时使用HOC
中的Container
有关。
我将在此处发布整个HOC
,仅发布container's
块正下方的HOC
导出部分。
import React, {Fragment} from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from '../../../store/actions/indexActions'
const withError = WrappedComponent => {
return props => {
return<Fragment>
<Modal show={props.error} modalCanceled={() => props.onResetError()}>
{props.error && props.error}
</Modal>
<WrappedComponent {...props} />
</Fragment>
}
}
const mapStateToProps = state => {
return {
error: state.httpReqReducer.errorMessage
}
}
const mapActionsToProps = dispatch => {
return {
onResetError: () => dispatch(actionCreators.resetError())
}
}
export default connect(mapStateToProps, mapActionsToProps)(withError)
现在我的export
的Container
部分称为VeggieBuilder
export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))
如果删除connection
的Redux
上的export
和HOC
,则错误消失。
先谢谢大家。
如果这里需要任何其他信息,我将相应地编辑问题。
您可以通过这种方式修改您的HOC:
import React, { Fragment } from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from '../../../store/actions/indexActions'
const withError = WrappedComponent => {
const wrappedComp = props => {
return <Fragment>
<Modal show={props.error} modalCanceled={() => props.onResetError()}>
{props.error && props.error}
</Modal>
<WrappedComponent {...props} />
</Fragment>
}
const mapStateToProps = state => {
return {
error: state.httpReqReducer.errorMessage
}
}
const mapActionsToProps = dispatch => {
return {
onResetError: () => dispatch(actionCreators.resetError())
}
}
return connect(mapStateToProps, mapActionsToProps)(wrappedComp);
}
export default withError;