使用具有通用基本布局的react-router时，componentDidMount调用了3次

Question

我正在使用一些路线开发一个小型应用程序。我想将所有这些路由呈现在同一个容器中，所以我想我将创建一个称为“ Base”的基本布局，并将react-router以及单独的路由作为子级传递。但是，我注意到访问特定路由时，componentWillMount生命周期函数被调用了3次。

注释

• 我正在使用react 16.8和react-router-dom 5.0.0和redux 4.0
• BaseLayout，ShowingInfo和Verification都通过react-redux连接到redux存储

要获得直观的想法，理想的结构是不同页面的外观。

显示页面

<BaseLayout>
  <ShowingInfo>
</BaseLayout>

验证页

<BaseLayout>
  <Verification>
</BaseLayout>

确认页面

<BaseLayout>
  <Confirmation>
</BaseLayout>

App.js

import { Route, Switch, BrowserRouter as Router } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <Base>
        <Switch>
          <Route path="/showing/:showingId" component={ShowingInfo} />
          <Route path="/showing/:showingId/verification" component={Verification} />
        </Switch>
      </Base>
    );
  }
}

BaseLayout.js

class BaseLayout extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className='container'>
          <div className='container--with-margin'>
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}

ShowingInfo

export class ShowingInfo extends React.Component {
  componentDidMount() {
    // Fired 3 times
    console.log('ShowingInfo.componentDidMount()');
    // Making API calls here using redux/actions
  }
  render() {
   return (<h1>Hello ShowingInfo</h1>);
  }
}

验证

export class Verification extends React.Component {
  componentDidMount() {
    // Only Fired once
    console.log('Verification.componentDidMount()');
  }
  render() {
   return (<h1>Hello Verification</h1>);
  }
}

对于ShowingInfo，componentDidMount被调用了3次。对于验证，它仅被调用一次。唯一的区别是Verification目前仅呈现伪文本，而ShowInfo触发redux操作以从API提取数据。

一些console.logs

  

ShowingInfo.componentDidMount（）   actions.js？db34：51 GetShowingInfo结果{data：{…}，正在加载：false，> networkStatus：7，陈旧：false}   ShowingInfo.componentDidMount（）   actions.js？db34：51 GetTicketInfo结果{data：{…}，正在加载：false，> networkStatus：7，陈旧：false}   ShowingInfo.componentDidMount（）

状态改变后立即触发componentDidMount吗？