javascript - 通过连接调度操作我收到错误最大调用堆栈大小超出

Question

• 我是 Redux 新手，并尝试从头开始学习所有内容。
• 所以我拿了一个 npm 包并以我的形式实现
• 当我尝试通过连接分派(dispatch)操作时，收到错误消息超出了最大调用堆栈大小
• 没有连接它工作正常。

• 你能让我知道如何修复它吗？我查看了两个文档 https://www.npmjs.com/package/react-redux-loading-bar https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013

• 我通过放置控制台进行了调试，但仍然无法修复它。

• 你能告诉我如何修复吗，以便将来我自己修复它。
• 在下面提供我的代码片段和沙箱。

https://codesandbox.io/s/zn812n05v4

const mapDispatchToProps = dispatch => {
  console.log("mapDispatchToProps--->", dispatch);
  return {
    fetchHistoryBenchmarkDatafromURL: () => {
      dispatch(showLoading("sectionBar"));
      // dispatch(fetchHistoryBenchmarkDatafromURL());
    }
  };
};

export default reduxForm({
  form: "syncValidation", // a unique identifier for this form
  validate, // <--- validation function given to redux-form
  warn // <--- warning function given to redux-form
})(connect(mapDispatchToProps)(SyncValidationForm));

错误

RangeError: Maximum call stack size exceeded
    at runBatchedUpdates (ReactUpdates.js:150)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:47)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:209)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
    at flushBatchedUpdates (ReactUpdates.js:172)

Answer 1

您不应该在渲染过程中调用dispatch。 SyncValidationForm 中的以下行将触发 redux 状态的更改，这将触发重新渲染，这将再次重新执行此行更改状态等。

store.dispatch(showLoading("sectionBar"));