Javascript 更换道具后，componentDidMount不断重复调用

当我这样做时，无限循环组件didmount会无限调用自身，这是一个问题：

this.props.setRootState({industries: ['hello','world']});

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() {
        return (
            <div className={"wrapperDiv"}>
                <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.rootState.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.rootState.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"}>
                        <Link to='/information-job'>
                            <div onClick={() => this.props.setRootState({globalVariable: 'bar'})}>
                                <Button className={"primaryBtn"}>Seuraava</Button>
                            </div>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}
export default InformationFilter;

整个代码如下所示：

this.props.setRootState({industries: ['hello','world']});

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() {
        return (
            <div className={"wrapperDiv"}>
                <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.rootState.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.rootState.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"}>
                        <Link to='/information-job'>
                            <div onClick={() => this.props.setRootState({globalVariable: 'bar'})}>
                                <Button className={"primaryBtn"}>Seuraava</Button>
                            </div>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}
export default InformationFilter;

从“React”导入React；
从'react router dom'导入{Route，Link}；
从“../FourthView/FourthView.component”导入第四视图；
从“react Bootstrap”导入{Bootstrap、Grid、Row、Col、Button、Image、Modal、Popover}；
从“../Header/Header.component”导入标题；
从“/information.style.scss”导入样式；
从“../industries/industry.api”导入industryApi；
类InformationFilter扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
componentDidMount（）{
industryApi.getAll（）.then（响应=>{
if（response.data）{
this.props.setRootState（{industries:response.data._embedded.industries}）；
}否则{
控制台日志（响应）；
}
});
}
onIndustryChangeOption（事件）{
this.props.setRootState（{selectedIndustry:event.target.value}）；
}
onJobChangeOption（事件）{
this.props.setRootState（{selectedJob:event.target.value}）；
}
render（）{
返回(
阿洛伊斯塔酒店
Valitse opintoala
此.onIndustryChangeOption（e）}
value={this.props.rootState.selectedIndustry}>
{this.props.rootState.industries.map（（行业，i）=>{industry.title}}
Valitse työtehtävä
此.onJobChangeOption（e）}
value={this.props.rootState.selectedJob}>
{this.props.rootState.industries.map（（作业，i）=>{job.text}
拉文托拉-卡特林加拉酒店

viverra est semper的Donec facilisis tortor ut augue lacinia。
塞德·萨皮安·梅特斯，权杖，临时侵权人。佩伦特式的无尊严
内克。我们的生命之门，我们的尊严，我们的精英元素，我们的力量，我们的力量
turpis是一个整数，它的名字叫pellentesque，名字叫metus，名字叫pharetra odio。


viverra est semper的Donec facilisis tortor ut augue lacinia。
塞德·萨皮安·梅特斯，权杖，临时侵权人。佩伦特式的无尊严
内克。我们的生命之门，我们的尊严，我们的精英元素，我们的力量，我们的力量
turpis是一个整数，它的名字叫pellentesque，名字叫metus，名字叫pharetra odio。

this.props.setRootState（{globalVariable:'bar'}）}>
瑟拉瓦
);
}
}
导出默认信息过滤器；

Routes.js

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: [],
        }
    }

    render() {
        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;

从“React”导入React；
从“react router dom”导入{HashRouter、Route、Switch、Redirect、Link}；
从“/components/Main/Main.component”导入Main；
从“./components/SecondView/SecondView.component”导入SecondView；
从“./components/ThirdView/ThirdView.component”导入ThirdView；
从“./components/Traineeship/traineeships.component”导入培训课程；
从“/components/information/information filter.component”导入InformationFilter；
从“/components/information/information job.component”导入InformationJob；
类AppRoutes扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选定的行业：“”，
所选作业：“”，
行业：[]，
职位：[]，
}
}
render（）{
const InformationFilterPage=（）=>；
const InformationJobPage=（）=>；
const TraineeshipPage=（）=>；
返回(
);
}
}
导出默认批准；

有人知道这里发生了什么吗？

---

由于交叉传递的值，我将状态保留在这个组件中，您可能会说为什么不使用redux，但问题是我不想用于这个项目，因为它是一个非常小的项目

当您通过setRootState对父组件调用setState时，它会设置父组件的状态，intern会导致其子组件的重新加载，这会导致子组件重新装载，调用componentDidMount，然后再次在父组件上设置状态，循环继续

要解决这个问题，您可以调用api并在父组件本身中设置状态

您的父组件现在应该具有

componentDidMount() {
  this.industryApiCall ()
}

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

你可以像这样把这个函数传递给你的孩子

const InformationFilterPage = () => <InformationFilter rootState={this.state}
                               callApi={this.industryApiCall.bind(this)} />;

const InformationFilterPage=（）=>；

并通过呼叫将其用于您的孩子组件中

this.props.callApi（）

---

当您通过setRootState调用父组件上的setState时，它会设置父组件的状态，intern会导致其子组件的重新加载，从而导致子组件重新装载调用com的组件