React Stripe 拆分卡元素出错：超出最大更新深度答案

【问题标题】：Error with React Stripe split card elements: Maximum update depth exceededReact Stripe 拆分卡元素出错：超出最大更新深度
【发布时间】：2020-04-18 10:23:48
【问题描述】：

总结

我已将我的应用程序剥离为裸组件，并发现我的问题来自拆分的 React Stripe Elements。此实现与以前的应用程序一起工作得很好，因此这些元素的实现可能会发生一些变化。

App.js

import React, { Component } from "react";
import { Router } from 'react-router-dom';
import history from './history';
import Routes from "./routes";

import { Elements, StripeProvider } from "react-stripe-elements";

class App extends Component {
  render() {
    return (
      <StripeProvider apiKey="pk_test_xxxxxx">
        <Elements>
          <Router history={history}>
            <Routes />
          </Router>
        </Elements>
      </StripeProvider>
    );
  }
}

export default App;

Routes.js

import React from 'react'
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import Billing from './components/pages/account/billing/Billing';

export class Routes extends React.PureComponent {
    render() {
        return (
            <Switch>
                <Route path="/" exact component={() => <Billing />} />
            </Switch>
        );
    }
}


export default withRouter(Routes);

Billing.js

import React from "react";
import {CardNumberElement, CardExpiryElement, CardCVCElement, injectStripe} from 'react-stripe-elements';

class Billing extends React.Component {
  render() {

      return (
        <div>
              <CardNumberElement/>
                <CardExpiryElement />
                <CardCVCElement />
        </div>
      );

  }
}

export default injectStripe(Billing);

packages.json

{
  "name": "xxxxxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "filepond": "^4.7.4",
    "filepond-plugin-image-exif-orientation": "^1.0.6",
    "filepond-plugin-image-preview": "^4.5.0",
    "firebase": "^7.2.3",
    "formik": "^2.0.3",
    "react": "^16.11.0",
    "react-burger-menu": "^2.6.11",
    "react-confirm": "^0.1.18",
    "react-dnd": "^5.0.0",
    "react-dnd-html5-backend": "^3.0.2",
    "react-dom": "^16.11.0",
    "react-filepond": "^7.0.1",
    "react-firebase-file-uploader": "^2.4.3",
    "react-flexbox-grid": "^2.1.2",
    "react-ga": "^2.7.0",
    "react-icons": "^3.8.0",
    "react-modal": "^3.11.1",
    "react-responsive": "^8.0.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-stripe-elements": "^6.0.1",
    "react-toastify": "^5.4.0",
    "react-with-separator": "^1.2.0",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

错误

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

【问题讨论】：

这部分代码看起来没问题。您在生命周期方法或渲染方法中有 setState 或类似调度操作的东西。此外，我不能 100% 确定“react-stripe-elements”是否是一个不错的选择 - 依赖项是最新的，但代码在两年内保持不变，问题仍然存在。
好吧，我的错，大部分代码都改变了。但是您正在使用不同版本的依赖项，例如。不同的反应版本 - 这可能是问题。
@DangerDoug 在安装依赖项时是否收到任何警告？
@DangerDoug 你可以做的第一件事 - 删除 node_modules 并再次运行 npm install。这可能是一些依赖性问题。 npm audit 也可以帮助你，但不要使用 force fix 进行审计 - 它可以对依赖项进行重大更改。
模块集成：选中。现在是依赖版本不兼容的情况。在 react-stripe-elements 的 package.json 中，您有严格的版本要求，其中一些版本比您使用的版本低。尝试降级。

标签： javascript reactjs react-router stripe-payments

【解决方案1】：

看起来Elements 组件在嵌套条带Element 被挂载时更新其状态，导致Router 被重新渲染，从而导致Billing 及其子@987654325 的卸载和重新挂载@s，导致循环。

将Elements 组件放在Route 中应该可以解决问题。

例如在 Route.js 中：

import React from 'react'
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import { Elements } from 'react-stripe-elements';
import Billing from './components/pages/account/billing/Billing';

export class Routes extends React.PureComponent {
    render() {
        return (
            <Switch>
                <Route path="/" exact component={() => <Elements><Billing /></Elements>} />
            </Switch>
        );
    }
}


export default withRouter(Routes);

【讨论】：