Question

我有一个使用React，Redux，React Router，Redux Saga和Redux Saga Router的React应用。

我已经在./history文件中设置了我的历史记录，如下所示：

import { createLink } from 'redux-saga-router/react';
import { createBrowserHistory } from 'redux-saga-router';

export const history = createBrowserHistory();

export const Link = createLink(history);

我在Link中使用NavItem.jsx：

<Link to={item.route}>
  {item.name}
</Link>

如果我连续单击许多NavItem，最终会收到控制台错误，提示Channel's Buffer overflow！

buffers.js:56 Uncaught Error: Channel's Buffer overflow!
    at Object.put (buffers.js:56)
    at Object.put (channel.js:67)
    at channel.js:161
    at createHistoryChannel.js:27
    at listener (createTransitionManager.js:54)
    at createTransitionManager.js:73
    at Array.forEach (<anonymous>)
    at Object.notifyListeners (createTransitionManager.js:72)
    at setState (createBrowserHistory.js:95)
    at createBrowserHistory.js:186
    at Object.confirmTransitionTo (createTransitionManager.js:44)
    at Object.push (createBrowserHistory.js:166)
    at Link._this.onClick (createLink.js:43)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:466)
    at executeDispatchesInOrder (react-dom.development.js:485)
    at executeDispatchesAndRelease (react-dom.development.js:586)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:597)
    at forEachAccumulated (react-dom.development.js:567)
    at runEventsInBatch (react-dom.development.js:728)
    at runExtractedEventsInBatch (react-dom.development.js:737)
    at handleTopLevel (react-dom.development.js:4201)
    at batchedUpdates (react-dom.development.js:12537)
    at batchedUpdates (react-dom.development.js:1939)
    at dispatchEvent (react-dom.development.js:4282)
    at interactiveUpdates (react-dom.development.js:12592)
    at interactiveUpdates (react-dom.development.js:1958)
    at dispatchInteractiveEvent (react-dom.development.js:4259)

如果有帮助，这是我的App索引文件：

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { authConfig } from '../utils/authUtils';
import { history } from '../history';

// Layout
import Layout from './Layout';
import Banner from './Layout/Banner';

// Pages
import Login from './Login';
import Search from './Search';
import Draft from './Draft';
import Drafts from './Drafts';
import Whoops from './Whoops';

const App = ({ loading }) => (
  <Router history={history}>
    <Security
      issuer={authConfig.issuer}
      client_id={authConfig.clientId}
      redirect_uri={authConfig.redirectUri}
    >
      <Banner />

      <Switch>
        <Route exact path="/whoops" component={Whoops} />

        <Route exact path="/" render={() => <Login />} />
        <Route path="/login" render={() => <Login />} />
        <Route path="/implicit/callback" component={ImplicitCallback} />

        <Layout loading={loading}>

          <SecureRoute path="/search" component={Search} />

          <Switch>
            <SecureRoute path="/drafts/:id" component={Draft} />
            <SecureRoute path="/drafts" component={Drafts} />
          </Switch>

        </Layout>
      </Switch>
    </Security>
  </Router>
);

App.propTypes = {
  loading: PropTypes.bool.isRequired,
};


const mapStateToProps = state => ({
  loading: state.auth.loading,
});

export default connect(mapStateToProps)(App);

我通过尝试使用无redux-saga-router的普通React Router v4简化了我的应用程序，但问题仍然存在。

react-saga-router通道溢出

0 个答案: