组件在 react-redux 应用程序中意外卸载

Question

下面是我的 app 的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App.js';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { applyMiddleware } from 'redux';
import logger from 'redux-logger';

const state = (state = { num: 0 }, action) => {
  switch (action.type) {
    case 'CHANGE':
      return { ...state, num: 2 };
    default:
      return { ...state };
  }
};

const store = createStore(combineReducers({ state: state }), applyMiddleware(logger));

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root'),
);

下面是 App.js：

import React from 'react';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import A from './A';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  changeNum = () => {
    this.props.dispatch({ type: 'CHANGE' });
  };

  render() {
    return (
      <>
        <Switch>
          <Route exact path="/" component={() => <A changeNum={this.changeNum} />} />
        </Switch>
      </>
    );
  }
}

const mapStateToProps = (state) => ({ num: state.state.num });

export default withRouter(connect(mapStateToProps)(App));

以下是 A.js：

import React from 'react';
import { connect } from 'react-redux';

class A extends React.Component {
  componentDidMount() {
    this.props.changeNum();
  }
  componentWillUnmount() {
    console.log('A component unmounted');
  }
  render() {
    return <h1>component A</h1>;
  }
}

export default A;

问题是，在点击“/”路由时，我看到消息 A component unmounted 和两个连续的 CHANGE 操作而不是控制台中的一个操作，这是出乎意料的。

我在早期的项目中也看到过这样的问题，但我一直忽略了。所以我想找出问题的根源，所以就在这里。

请解释一下意外的行为。

谢谢！

Answer 1

您在Route 中用于渲染组件的语法在这里是错误的。如果你想向组件传递一些额外的道具以及route 道具，那么你应该使用render 而不是component

 <Switch>
          <Route exact path="/" render={(props) => <A {...props} changeNum={this.changeNum} />} />
 </Switch>