ReactJS：アクセス子供決勝州

Question

これは冗長な質問のビットとして見えるかもしれませんが、それが更新された後、私は、リアクトに子の最終状態にアクセスしようとしています。私はReact LifeCycleのドキュメントを見てきましたが（それは問題かもしれませんが、わからないかもしれません）、高低を検索して、それを理解できません。

私は子供がいくつかの更新（AJAXリクエストをしてからいくつかの場合はthis.setStates）を行った後、子供の状態の（最終）値にアクセスする必要があるコンポーネントを持っています。

はこれまでのところ、私は（componentDidMount内部）REFを介してアクセス、その子の全体の状態にアクセスすることができるんだけど、私は言った状態の特定の値にアクセスしようとすると、それはnullまたはundefinedを返します。

ここでは（私はあなたにできるだけ多くの無駄なコードを惜しましようとするでしょう）を説明するためにいくつかのサンプルコードです：私は私のためにaxiosを使用しています：

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>); 
    } 
} 

そして、ここでは、参考のために子コンポーネント（ノートです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>) 
    } 

} 

は親要素にこのコードを追加し、コールバックを使用するには、このよう

Answer 1

来る任意の助けに感謝：

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

そして、子コンポーネントにその機能を渡し、childcomponentに、戻って親までの子状態を通過します

this.props.handleAsyncDone(this.state); 

を追加します。