子コンポーネントのsetState警告。警告：マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます

Question

render()でビューコンポーネントが呼び出された特定のプロジェクトをユーザーがクリックすると、プロジェクトのリストを表示するページがあります。

親：

constructor(props) { 
    super(props); 
    this.state = { 
     showData : [], 
     view : false, 
     projectId: '' 
    }; 
    this.buttonHandler = this.buttonHandler.bind(this); 
    this.back = this.back.bind(this); 
    }; 


// change view state to true to render diff component 
    buttonHandler(){ 
    this.setState({view:true}) 
    }; 



    back(){ 

    this.setState({view:true}) 
    } 

render(){ 

    let compA = (
    <Paper> 
     <List> 
      <Subheader >New 
      Projects</Subheader> 
      {this.state.showData.map(item => 
       <div key={item.title}> 
        <ListItem onClick={()=> 
        this.buttonHandler()} leftAvatar= 
        {<Avatar icon={<Wallpaper />} />} primaryText= 
        "test" secondaryText="test" /> 
        <Divider inset={true} /> 
       </div> 
      )} 
     </List> 
    </Paper> 
); 

let compB = (
    <ReviewProject 
    back={this.back}/> 
); 
    return(
     <div> 
     {this.state.view?compB:compA} 
     </div> 
    ); 
} 

子コンプB：

constructor(props) { 
super(props); 
this.state = { 
//some code 
}; 

} 
//calls function back from parent which sets state the "view" to false 
dismiss() { 
    this.props.back(); 
    }; 

がdismiss()機能がリストコンポーネントcompAをバックレンダリングする子で呼び出されると、警告が飛び出す：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the compB component. 

これを解決する方法はありますか？良い練習が前後に他の1つの構成要素からナビゲートするものです

Answer 1

Iが見出さ溶液である：

AとBの切り替えを処理するためにviewProject成分と呼ばれる第三の成分を作成します。

class A extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <div> 
     This is component A 
     <button onClick={this.props.onGoBClick}>Go to B</button> 
     </div> 
    ) 
    } 
} 

class B extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <div> 
     This is component B 
     <button onClick={this.props.onGoAClick}>Go to A</button> 
     </div> 
    ) 
    } 
} 

class ViewContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     view: false, 
    } 
    this.goToA = this.goToA.bind(this); 
    this.goToB = this.goToB.bind(this); 
    } 

    goToA() { 
    this.setState({view: false}) 
    } 

    goToB() { 
    this.setState({view: true}) 
    } 

    render() { 
    return (
     this.state.view ? 
     <B onGoAClick={this.goToA}/> 
     : 
     <A onGoBClick={this.goToB}/> 
    ) 
    } 
} 

ReactDOM.render(<ViewContainer />, document.getElementById('app')) 

Answer 2

最初に 機能（）{の下にあるため、実際に

if (this.refs.ref) 
    this.setState({view: true}); 
} 

render() { 
    return (
    <div ref="ref">{this.state.view}</div> 
); 
} 

Answer 3

を定義したとして、あなたの状態を設定する前にも、REFを使用して試すことができますレンダリングすると、compAがレンダリングされた場合、compBが見つからない場合があります。したがって、リアクションが再レンダリングしようとすると、欠落している要素を見つけることができません。

==>解決：

render(){        
    let returnedComp = (
     <Paper> 
      <List> 
       <Subheader >New Projects</Subheader> 
       {this.state.showData.map(item => 
        <div key={item.title}> 
         <ListItem onClick={()=> 
         this.buttonHandler()} leftAvatar= 
         {<Avatar icon={<Wallpaper />} />} primaryText= 
         "test" secondaryText="test" /> 
         <Divider inset={true} /> 
        </div> 
       )} 
      </List> 
     </Paper> 
    ); 

     if (this.state.view) { 
      returnedComp = (
       <ReviewProject back={this.back}/> 
      ); 
     } 
     return(
      <div> 
      {returnedComp} 
      </div> 
     ); 
}