React Route渲染几次子道具React

Question

我有个大问题。

我正在使用React Router，但遇到问题，它在render中多次给出children components ...我不知道为什么。

父组件：

import React, { Component } from 'react';
import { Loading } from 'carbon-components-react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import 'carbon-components/css/carbon-components.min.css';
import Login from './pages/Login/Login';
import Overview from './pages/Overview/Overview';
import Graphic from './pages/Graphic/Graphic';
import Table from './pages/Table/Table';

import axios from 'axios';

class App extends Component {

  state = {
    domainStatus: undefined,
    subdomainStatus: undefined,
    managerStatus: undefined,
    countryStatus: undefined,
    cityStatus: undefined,
    squadNameStatus: undefined,
    domainStatusFiltered: undefined,
    subdomainStatusFiltered: undefined,
    managerStatusFiltered: undefined,
    countryStatusFiltered: undefined,
    cityStatusFiltered: undefined,
    squadNameStatusFiltered: undefined,
    job: '',
    porcentage: '',

    domainValue: '',
    subdomainValue: '',
    managerValue: '',
    squadNameValue: '',
    countryValue: '',
    cityValue: ''
  }


  componentDidMount() {
    const firstName = localStorage.getItem('nameLoggedUser');
    const lastName = localStorage.getItem('lastNameLoggedUser');
    const fullName = `${firstName} ${lastName}`.toLowerCase();

    const loggedUserIs = localStorage.getItem("user-role");
    const emailLoggedUser = localStorage.getItem('emailLoggedUser');

    if (loggedUserIs === 'L4') {
      axios.get(`/api/manager/${emailLoggedUser}`)
        .then(res => {
          this.setState({
            itemsTable: res.data, loading: false
          }, () => {
            const domain = this.state.itemsTable.filter(i => i.functional_manager.includes(`${fullName}`)).map(i => i.domain_name);
            const domainSelected = Array.from(new Set(domain)).toString();

            const subdomain = this.state.itemsTable.filter(i => i.functional_manager.includes(`${fullName}`)).map(i => i.subdomain_name);
            const subdomainSelected = Array.from(new Set(subdomain)).toString();

            this.setState({ manager: `${fullName}`, managerStatusFiltered: `${fullName}`, domain: domainSelected, domainStatusFiltered: domainSelected, subdomainStatusFiltered: subdomainSelected, subdomain: subdomainSelected, managerClear: false, domainClear: false, subdomainClear: false, loading: false })
          })
        })
        .catch(err => console.log(err))
    }

    if (loggedUserIs === 'L3') {
      axios.get(`/api/l3/${emailLoggedUser}`)
        .then(res => {
          this.setState({ itemsTable: res.data, loading: false }, () => {
            const domain = this.state.itemsTable.map(i => i.domain_name);
            const domainSelected = Array.from(new Set(domain)).toString();

            const subdomain = this.state.itemsTable.map(i => i.subdomain_name);
            const subdomainSelected = Array.from(new Set(subdomain)).toString();

            this.setState({ domain: domainSelected, domainStatusFiltered: domainSelected, subdomainStatusFiltered: subdomainSelected, subdomain: subdomainSelected, domainClear: false, subdomainClear: false, loading: false })
          })
        })
        .catch(err => console.log(err))
    }

    if (loggedUserIs === 'L2') {
      axios.get(`/api/l2/${emailLoggedUser}`)
        .then(res => {
          this.setState({ itemsTable: res.data, loading: false }, () => {
            const domain = this.state.itemsTable.map(i => i.domain_name);
            const domainSelected = Array.from(new Set(domain)).toString();

            this.setState({ domain: domainSelected, domainStatusFiltered: domainSelected, domainClear: false, loading: false })
          })
        })
        .catch(err => console.log(err))
    }

    if (loggedUserIs === 'L1') {
      axios.get(`/api/l1/${emailLoggedUser}`)
        .then(res => {
          this.setState({ itemsTable: res.data, loading: false })
        })
        .catch(err => console.log(err))
    }

    if (loggedUserIs === 'full') {
      axios.get(`/api/menuDomain`)
        .then(res => this.setState({ domain: res.data }))
        .catch(err => console.log(err))
    }
  }


  toFilter = (nameFilter, nameFilterStatus, valueFilter) => {
    this.setState({ [nameFilter]: valueFilter, [nameFilterStatus]: valueFilter, clear: false }, () => {
      console.log(this.state.domainValue, 'aquii poooppopo')
      if (this.state.domainValue !== '') {
        const loggedUserIs = localStorage.getItem("user-role");
        if (loggedUserIs === 'full') {
          axios.get(`/api/menuSubdomain/${this.state.domainValue}`)
            .then(res => this.setState({ subdomain: res.data }))
            .catch(err => console.log(err))
        }
      }

      if (this.state.subdomainValue !== '') {
        const loggedUserIs = localStorage.getItem("user-role");
        if (loggedUserIs === 'full') {
          axios.get(`/api/menuManager/${this.state.domainValue}/${this.state.subdomainValue}`)
            .then(res => this.setState({ manager: res.data }))
            .catch(err => console.log(err))
        }
      }

      if (this.state.managerValue !== '') {
        const loggedUserIs = localStorage.getItem("user-role");
        if (loggedUserIs === 'full') {
          axios.get(`/api/menuSquad/${this.state.domainValue}/${this.state.subdomainValue}/${this.state.managerValue}`)
            .then(res => this.setState({ squadName: res.data }))
            .catch(err => console.log(err))
        }
      }

      if (this.state.squadNameValue !== '') {
        const loggedUserIs = localStorage.getItem("user-role");
        if (loggedUserIs === 'full') {
          axios.get(`/api/menuCountry/${this.state.domainValue}/${this.state.subdomainValue}/${this.state.managerValue}/${this.state.squadNameValue}`)
            .then(res => this.setState({ country: res.data }))
            .catch(err => console.log(err))
        }
      }

      if (this.state.countryValue !== '') {
        const loggedUserIs = localStorage.getItem("user-role");
        if (loggedUserIs === 'full') {
          axios.get(`/api/menuCity/${this.state.domainValue}/${this.state.subdomainValue}/${this.state.managerValue}/${this.state.squadNameValue}/${this.state.countryValue}`)
            .then(res => this.setState({ city: res.data }))
            .catch(err => console.log(err))
        }
      }
    })
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route exact path="/" render={() =>
            <Overview
              domainValue={this.state.domainValue}
              subdomainValue={this.state.subdomainValue}
              managerValue={this.state.managerValue}
              squadNameValue={this.state.squadNameValue}
              cityValue={this.state.cityValue}
              countryValue={this.state.countryValue}
            />} />
        </Switch>
      </Router>
    );
  }
}

export default App;

儿童组件：

import React from 'react';


export default class Overview extends React.Component {
  render() {
    console.log('test of render overview')
    return (
      <Test/>
    )
  }
};

console.log(test ....)出现three次。如果我删除了React Router，它就会出现一次，那是正确的。

因此吗？有人可以帮我吗？