withRouter、connect() 和 react-compose答案

【问题标题】：withRouter, connect() and react-composewithRouter、connect() 和 react-compose
【发布时间】：2018-03-11 03:16:33
【问题描述】：

我正在使用react-redux 连接函数和withRouter 函数，并且我正在尝试在这里使用compose()。这是代码：

export default compose (
    withRouter,
    connect(mapStateToProps)
)(Dashboard);

但我收到下一个错误：

Uncaught TypeError: Converting circular structure to JSON
    at Object.stringify (<anonymous>)
    at wrapWithConnect (connectAdvanced.js:84)
    at applyFunctor (index.js:124)
    at index.js:144
    at Array.reduce (<anonymous>)
    at ComposedComponent (index.js:143)
    at ReactCompositeComponent.js:305
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:319)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)

这里有什么问题？

【问题讨论】：

您是否正在对您所在州不可字符串化的对象执行 JSON.stringify？

标签： reactjs redux react-router react-redux

【解决方案1】：

connect 返回一个接受组件的函数。所以，我认为如果你稍微改变你的括号会起作用：

export default compose(
    withRouter,
    connect(mapStateToProps)(Dashboard)
);

或者：

export default connect(mapStateToProps)(compose(
    withRouter,
    Dashboard
));

【讨论】：

export default withRouter(connect(mapStateToProps)(HomeComponent)) 也可以，但我应该这样写吗？
你没有有使用compose，但是随着你添加越来越多的HOC，我认为使用compose更好，否则很难看到括号在哪里。
是的，明白了。我也觉得使用compose 是更好的方法
怎么样：compose( withRouter, connect(mapStateToProps) )(Dashboard)，让一切变平

【解决方案2】：

你可以像Parnab Sanya提到的那样简单地使用它

export default withRouter(connect(mapStateToProps)(HomeComponent))

或者如果你有withStyles()然后使用这个

export default withRouter(
compose(
   withStyles(HomeComponentStyle),

   connect(mapStateToProps)
)(HomeComponent));

【讨论】：

萨汉，你救了我的命！经历了 10 个线程和 10 篇文章，但都没有工作。

【解决方案3】：

export default withRouter(connect(mapStateToProps)(Dashboard))

工作正常而且很短。

【讨论】：