javascript - React Stripe 拆分卡元素错误 : Maximum update depth exceeded

Question

总结

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

应用程序.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;

路由.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);

计费.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

当嵌套的 Stripe Element 被挂载时，Elements 组件似乎更新了它的状态，导致 Router 被重新渲染，导致Billing 及其子 Element 的卸载和重新安装，导致循环。

将 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);