修改Props后componentDidMount反复调用引发无限循环问题求助

嘿，我一眼就看出问题出在哪了——你的AppRoutes组件里定义路由页面的方式有问题！

你现在是用内联函数来创建每个路由对应的组件，比如：

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

然后把这个函数传给Route的component属性。每次AppRoutes的state更新时（比如你在InformationFilter里调用setRootState），这个内联函数就会重新生成一个全新的组件引用。React会认为这是一个完全不同的组件，于是会把之前的InformationFilter卸载，再重新挂载一个新的实例。这就导致componentDidMount被反复触发，每次触发又更新父组件state，形成无限循环。

修复方案 #

你只需要调整路由的写法，把内联函数组件改成用Route的render属性传递props，这样就不会每次都创建新的组件实例了：

步骤1：优化AppRoutes的方法绑定（可选但推荐）

先在AppRoutes的构造函数里提前绑定setRootState，避免每次render都调用bind：

constructor(props) {
  super(props);
  this.state = {
    selectedIndustry: '',
    selectedJob: '',
    industries: [],
    jobs: [],
  };
  // 提前绑定方法，避免重复创建函数
  this.setRootState = this.setState.bind(this);
}

步骤2：修改路由定义

把原来的内联函数组件替换成render属性的写法：

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

这样修改后，当AppRoutes的state更新时，Route只会重新执行render回调里的函数，传递新的props给已经挂载的子组件，而不会卸载再重新挂载它们。InformationFilter的componentDidMount只会在第一次挂载时执行一次，再也不会触发无限循环了。

额外小提示 #

我还注意到你的InformationFilter组件里，jobs下拉框的渲染代码有个小错误：

{this.props.rootState.industries.map((job, i) => <option key={i} value={job.id}>{job.text}</option>)}

你这里用了industries数组来渲染job选项，应该改成jobs数组才对：

{this.props.rootState.jobs.map((job, i) => <option key={i} value={job.id}>{job.text}</option>)}

内容的提问来源于stack exchange，提问作者Mizlul