Question

我有一个简单的路线设置：

function requireAuth(nextState, replace, next) {
  store.dispatch(verify())
    .then(() => {
      const state = store.getState();

      if (state.authenticated === false) {
        replace({
          pathname: '/login',
          state: { nextPathname: nextState.location.pathname }
        })
      }
    })
    .then(next);
}

    ReactDOM.render(
        <Provider store={ store }>
          <Router history={ browserHistory }>
            <Route path="/" component={ AppContainer }>
              <IndexRoute component={ Home } onEnter={requireAuth} />
              <Route path="device/:id" component={ DeviceContainer } onEnter={requireAuth} />
            </Route>
          </Router>
        </Provider>,
      document.getElementById('app')
    );

其中包括这个简单的组件：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'

class DeviceContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    console.log('DeviceContainer:componentWillMount');
  }

  componentWillUnmount() {
    console.log('DeviceContainer:componentWillUnmount');
  }

  render() {
    return (
      <div></div>
    );
  }
}

export default connect(mapStateToProps)(DeviceContainer);

即使在剥离每个功能的组件后，仍会发生奇怪的事情：当有人进入路线device/1234时，将调用componentWillMount()。问题是：离开路线时会发生以下情况：

DeviceContainer：componentWillUnmount
DeviceContainer：componentWillMount
DeviceContainer：componentWillUnmount

因此卸载组件然后重新安装并卸载，导致多种副作用。没有注册的听众，一切都发生在这样的基本组件中，我无法弄清楚原因。堆栈跟踪也没有真正揭示：

(anonymous function)    @   VM8566:1
evaluate
componentWillUnmount    @   DeviceContainer.jsx:13
(anonymous function)    @   ReactCompositeComponent.js:409
measureLifeCyclePerf    @   ReactCompositeComponent.js:75
unmountComponent    @   ReactCompositeComponent.js:408
unmountComponent    @   ReactReconciler.js:79
obj.(anonymous function)    @   backend.js:8386
unmountComponent    @   ReactCompositeComponent.js:418
unmountComponent    @   ReactReconciler.js:79
obj.(anonymous function)    @   backend.js:8386
updateChildren  @   ReactChildReconciler.js:114
_reconcilerUpdateChildren   @   ReactMultiChild.js:208
_updateChildren @   ReactMultiChild.js:312
updateChildren  @   ReactMultiChild.js:299
_updateDOMChildren  @   ReactDOMComponent.js:930
updateComponent @   ReactDOMComponent.js:748
receiveComponent    @   ReactDOMComponent.js:710
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
updateChildren  @   ReactChildReconciler.js:109
_reconcilerUpdateChildren   @   ReactMultiChild.js:208
_updateChildren @   ReactMultiChild.js:312
updateChildren  @   ReactMultiChild.js:299
_updateDOMChildren  @   ReactDOMComponent.js:930
updateComponent @   ReactDOMComponent.js:748
receiveComponent    @   ReactDOMComponent.js:710
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
_updateRenderedComponent    @   ReactCompositeComponent.js:754
_performComponentUpdate @   ReactCompositeComponent.js:724
updateComponent @   ReactCompositeComponent.js:645
receiveComponent    @   ReactCompositeComponent.js:547
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
_updateRenderedComponent    @   ReactCompositeComponent.js:754
_performComponentUpdate @   ReactCompositeComponent.js:724
updateComponent @   ReactCompositeComponent.js:645
receiveComponent    @   ReactCompositeComponent.js:547
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
_updateRenderedComponent    @   ReactCompositeComponent.js:754
_performComponentUpdate @   ReactCompositeComponent.js:724
updateComponent @   ReactCompositeComponent.js:645
receiveComponent    @   ReactCompositeComponent.js:547
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
_updateRenderedComponent    @   ReactCompositeComponent.js:754
_performComponentUpdate @   ReactCompositeComponent.js:724
updateComponent @   ReactCompositeComponent.js:645
receiveComponent    @   ReactCompositeComponent.js:547
receiveComponent    @   ReactReconciler.js:125
obj.(anonymous function)    @   backend.js:8386
_updateRenderedComponent    @   ReactCompositeComponent.js:754
_performComponentUpdate @   ReactCompositeComponent.js:724
updateComponent @   ReactCompositeComponent.js:645
performUpdateIfNecessary    @   ReactCompositeComponent.js:561
performUpdateIfNecessary    @   ReactReconciler.js:157
obj.(anonymous function)    @   backend.js:8386
runBatchedUpdates   @   ReactUpdates.js:150
perform @   Transaction.js:140
perform @   Transaction.js:140
perform @   ReactUpdates.js:89
flushBatchedUpdates @   ReactUpdates.js:172
closeAll    @   Transaction.js:206
perform @   Transaction.js:153
batchedUpdates  @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:200
enqueueUpdate   @   ReactUpdateQueue.js:24
enqueueSetState @   ReactUpdateQueue.js:209
ReactComponent.setState @   ReactComponent.js:63
(anonymous function)    @   Router.js:128
(anonymous function)    @   createTransitionManager.js:244
(anonymous function)    @   createTransitionManager.js:99
done    @   AsyncUtils.js:79
(anonymous function)    @   AsyncUtils.js:85
getComponentsForRoute   @   getComponents.js:11
(anonymous function)    @   getComponents.js:35
(anonymous function)    @   AsyncUtils.js:84
mapAsync    @   AsyncUtils.js:83
getComponents   @   getComponents.js:34
finishEnterHooks    @   createTransitionManager.js:93
next    @   AsyncUtils.js:52
(anonymous function)    @   TransitionUtils.js:94
wrappedNext @   TransitionUtils.js:116

如果删除requireAuth挂钩，则此行为不再发生。我在这里失踪的是什么？

离开路线后，React组件再次安装

0 个答案: