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

Question

摘要

我已经将我的应用程序剥离为裸露的组件，发现我的问题出在拆分的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限制了嵌套更新的数量，以防止无限循环。

Answer 1

看起来像Elements组件在装入嵌套的Stripe Element时会更新其状态，从而导致Router被重新渲染，从而导致{{1 }}及其子Billing引起循环。

将Element组件放入Elements内应该可以解决问题。

例如在 Route.js 中：

Route