ReactJS：訪問兒童最終狀態

這看起來有點多餘的問題，但我試圖在更新後訪問React中的一個孩子的最終狀態。我一直在研究React LifeCycle文檔（我認爲這可能是問題，但不確定），搜索高低，並不能完全弄明白。ReactJS：訪問兒童最終狀態

我有一個組件需要訪問孩子的狀態（最終）值，一旦孩子已經做了一些更新（AJAX請求，然後做幾個this.setStates）。

到目前爲止，我能夠訪問該孩子的整個狀態，通過參考訪問（內componentDidMount），但是當我嘗試訪問的所述狀態，它返回null或undefined一個特定的值。

下面是一些示例代碼解釋（我會盡力的話，你儘可能多的無用的代碼可能）：

class Layout extends Component { 
    constructor(props) { 
     super(props); 
    } 
    componentDidMount(){ 
     // This gives me the updated State where pageTitle = "Whatever" 
     console.log(this.refs.child1); 
     // However this gives me the initial State where pageTitle = null 
     console.log(this.refs.child1.state.pageTitle); 
    } 
    render(){ 
     return (<div> 
      {React.cloneElement(
       this.props.children, 
       {ref: 'child1'} 
      )} 
     </div>); 
    } 
}

而這裏的子組件以供參考（注：我使用axios我Ajax請求）：

export class ChildComponent extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      resultData: result, 
      pageTitle: null 
     } 
    } 
    componentDidMount(){ 
     this.serverRequest = axios.get(apiUrl) 
      .then(function(result){ 
       this.setState({ 
        resultData: result, 
        pageTitle: result.pageTitle 
       }); 
      }.bind(this)) 
    } 
    render(){ 
     return(<div> 
      {use of different this.state.resultData values works fine here} 
     </div>) 
    } 

}

明白，說到這樣

來源

2016-08-16 josé Barcelon

您應該在您的子道具中使用回調函數，並在獲取異步結果時使用數據調用它。在你的父母你會得到thid數據。 – Maxx

@Maxx您能否詳細說明一下？ –

使用回調，這個代碼添加到父元素的幫助：

handleAsyncDone(data) { 
    // Do whatever it is people do with data 
}

然後傳遞函數的子組件，並在childcomponent，加

this.props.handleAsyncDone(this.state);

這將通過孩子狀態恢復到父。

來源

2016-08-16 16:04:27 Adam

非常感謝！正是我需要的 –

ReactJS：訪問兒童最終狀態

回答

相關問題