ComponentdidMount продолжает работать бесконечно, используя React

Question

У меня есть компонент, который обрабатывает в основном маршрутизацию, и у меня есть несколько состояний, определенных здесь, и я хотел бы получить доступ к этим состояниям из дочернего компонента.

В настоящее время мой код выглядит следующим образом:

import React from "react";
import {HashRouter, Route, Switch, Redirect, Link} from 'react-router-dom';
import Main from './components/main/main.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from './components/thirdview/thirdview.component';
import Traineeship from './components/traineeship/traineeships.component';
import InformationFilter from "./components/information/information-filter.component";
import InformationJob from "./components/information/information-job.component";

class AppRoutes extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            selectedIndustry: '',
            selectedJob: '',
            industries: [],
            jobs: [],
            industriesPage: 0,
        }
    }

    componentDidMount() {

    }

    render(){
        console.log("parent is called...");
        const InformationFilterPage = () => <InformationFilter rootState={this.state}
                               setRootState={this.setState.bind(this)}  />;

        const InformationJobPage = () => <InformationJob rootState={this.state}
                               setRootState={this.setState.bind(this)} />;

        const TraineeshipPage = () => <Traineeship rootState={this.state}
                                                         setRootState={this.setState.bind(this)} />;
        return (
            <HashRouter>
                <Switch>
                    <Route exact path='/' component={Main}/>
                    <Route path='/secondview' component={SecondView}/>
                    <Route path='/traineeships' component={TraineeshipPage}/>
                    <Route path='/information-filter' component={InformationFilterPage}/>
                    <Route path='/information-job' component={InformationJobPage}/>
                    <Redirect from='*' to='/' />
                </Switch>
            </HashRouter>
        );
    }
}

export default AppRoutes;

Если я изменю функцию render () на этот, бесконечный цикл больше не происходит, но тогда я теряю маршруты:

   render(){
        return (
            <InformationFilter rootState={this.state}
                               setRootState={this.setState.bind(this)}/>
        );
    }

Дочерний компонент выглядит следующим образом:

import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import Header from '../header/header.component';
import style from './information.style.scss';
import industryApi from '../industries/industry.api';

class InformationFilter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        industryApi.getAll().then(response => {
            if (response.data) {
                this.props.setRootState({industries:response.data._embedded.industries});
            } else {
                console.log(response);
            }
        });
    }

    onIndustryChangeOption(event) {
        this.props.setRootState({selectedIndustry: event.target.value});
    }

    onJobChangeOption(event) {
        this.props.setRootState({selectedJob: event.target.value});
    }

    render() {
        console.log("child is called...");
        return (
            <div className={"wrapperDiv"}>
                {JSON.stringify(this.props.rootState)}
                <div className={"flexDivCol"}>
                    <div id="header">
                        <Header size="small"/>
                    </div>
                    <div id="industryFilter">
                        <h2 className={"center"} style={{marginBottom: '25px'}}>Tietoa Aloista</h2>
                        <p className={"primaryColor center"}>Valitse opintoala</p>
                        <div className={"industries dropdownListHolder center"}>
                            <select id={"dropdownList"} onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}>
                                {this.props.rootState.industries.map((industry, i) =>  <option key={i} value={industry.id}>{industry.title}</option>)}
                                </select>
                        </div>
                        <p className={"primaryColor center"}>Valitse työtehtävä</p>
                        <div className={"jobs dropdownListHolder center"}>
                            <select id={"dropdownList"} onChange={(e) => this.onJobChangeOption(e)} value={this.props.selectedJob}>
                                {this.props.rootState.industries.map((job, i) => <option key={i} value={job.id}>{job.text}</option>)}
                            </select>
                        </div>
                    </div>
                    <div id="industryDescription">
                        <h4>Ravintola- ja cateringala</h4>
                        <p className={"secondaryColor"}>Donec facilisis tortor ut augue lacinia, at viverra est semper.
                            Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim
                            neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut
                            tincidunt turpis. Integer ac enim pellentesque, adipiscing metus id, pharetra odio. </p> <p
                        className={"secondaryColor"}>Donec facilisis tortor ut augue lacinia, at viverra est semper.
                        Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim
                        neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut
                        tincidunt turpis. Integer ac enim pellentesque, adipiscing metus id, pharetra odio. </p>
                    </div>
                    <div id={"btnFilter"}>
                        <Button className={"primaryBtn"}>
                            Seuraava
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default InformationFilter;

Любой знает, почему это происходит и как я могу это исправить, чтобы у меня не было бесконечного цикла, и я оставляю маршруты, так как мне нужны маршруты для навигации от одной страницы к другой.

Answer 1

Мне удается исправить это, изменив рендер на:

render(){
        return (
            <HashRouter>
                <Switch>
                    <Route exact path='/' component={Main}/>
                    <Route path='/secondview' component={SecondView}/>
                    <Route path='/traineeships' render={()=>(<Traineeship rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
                    <Route path='/information-filter' render={()=>(<InformationFilter rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
                    <Route path='/information-job' render={()=>(<InformationJob rootState={this.state} setRootState={this.setState.bind(this)} />)}/>
                    <Redirect from='*' to='/' />
                </Switch>
            </HashRouter>
        );
    }

Я не знаю, является ли это правильным исправлением, и я не знаю, почему оно работает.но это просто прекрасно работает, как я и хотел

Если кто-нибудь может объяснить, почему это работает, было бы здорово!