javascript - ComponentdidMount 使用 React 无限运行
问题描述
我有一个主要处理路由的组件,我在这里定义的状态很少,我想从子组件访问这些状态。
目前我的代码如下所示:
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;
任何人都知道为什么会发生这种情况以及如何解决,这样我就不会无限循环并保持路线,因为我需要从一页导航到另一页的路线。
解决方案
我设法通过将渲染更改为:
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>
);
}
我不知道这是否是正确的修复,我不知道它为什么会起作用。但它工作得很好,我想要的
如果有人能解释为什么这是有效的,那就太好了!
推荐阅读
- html - 响应能力 - Chrome 中的 iPad 与 Mozilla Firefox 中的 iPad
- r - zoo() 如何填充 n 行,而原始 Dataframe 有 n-1 行?
- python - Django rest api DRF - ViewSet 从 get 中隐藏一个字段,但包含 put
- python - 排序时如何处理NULL值?
- php - PHP Laravel 发送邮件返回验证错误和空字段
- serial-port - 串口通讯打印问题
- sun-codemodel - 如何将枚举值作为参数传递给代码模型中的调用?
- amazon-iam - AWS IAM CDK:为用户标记和创建访问密钥
- php - 如何在不刷新页面的情况下在同一个 { div } 上显示表单成功消息?
- javascript - Electron 构建时自动启动 NodeJS