Question

我遇到无限循环 componentDidMount 的问题，当我做这样的事情时无限地调用自己：

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;

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;

任何人都知道这里发生了什么？由于交叉传递值，我将状态保持在此组件中，您可能会说为什么不使用redux但事情是我不想用于此项目，因为它是一个非常小的项目！

Answer 1

当您通过setRootState在Parent组件上调用setState时，它会设置父级的状态，该子级实际导致其子级的重新呈现，这会导致子级重新装入调用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)} />;

并通过调用

在您的子组件中使用它

this.props.callApi（）

更改道具后，componentDidMount会反复调用

1 个答案: