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（）函数更改为this，则无限循环不再发生，但随后我将丢失路径：

   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>
        );
    }

我不知道这是否是正确的修复，我不知道它为什么有效。但它完全正常，我想要的方式

如果有人能解释为什么这样做会很棒！

ComponentdidMount使用React保持无限运行

1 个答案: