Question

我有一个页面，该页面的顶部有一个进度条（类似于this）。在页面中心，有一些内容取决于当前步骤。为了管理步骤，我有一个带有步骤栏的固定组件和一个带有某些路由的开关（/ step1 / step2）。当我想从步骤1转到步骤2时，必须以这种方式致电history.push()，我可以轻松更改路线。

我的问题是我无法更新step2中的步骤栏，因为即使我将函数传递给父反应也会检索到错误：

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

我的代码的结构如下：

组件：父

changeParentState(){
    this.setState({
       stateToChange: "something-changed"
    });
}
render(){
    return(
        <div> here the stepBar to update </div>
        <Switch>
             <Route path = '/step1' render = {() => <Step1Component attributes = {this.someAttributes}}/>
             <Route path = '/step2' render = {() => <Step2Component attributes = {this.changeParentState.bind(this)}}/>
        </Switch>
    );
}

第1步

render(){
  return(
     <button onClick = {() => {history.push({pathname: '/step2'})}}>next</button>
  )
}

第二步

constructor(props){
     super(props);
     this.props.changeParentState();  //error in parent when updating state
}

在这里我简化了问题，希望我不要省略一些引起问题的代码

Answer 1

您不能从构造函数中调用该函数尝试

componentWillMount(){
  this.props.changeParentState();
}

我以前从未使用过属性，但我更喜欢

<Step2Component changeParentState = {this.changeParentState.bind(this)}}/>

通过路由组件

1 个答案: