データを待つ再利用可能なコンポーネント

Question

多くのコンポーネントで、私はAPIデータをフェッチしています。そのため、データがロードされるまで待つ必要があります。それ以外の場合は、いくつかのメソッドが利用できないため、エラーが発生します。

私のAPIのクエリは、私はこれらの文書の全てに使用されている。この構造に作成したものについては、この

componentDidMount() { 
    prismicApi(prismicEndpoint).then((api) => 
     api.form('everything') 
     .ref(api.master()) 
     .query(Prismic.Predicates.at("my.page.uid", this.props.params.uid)) 
     .submit((err, res) => { 
     if (res.results.length > 0) { 
      this.setState({doc: res.results[0]}); 
     } else { 
      this.setState({notFound: true}); 
     } 
    })) 
} 

次のようになります。私はにこれを移動したい

render() { 
    if (this.state.notFound) { 
     return (<Error404 />); 
    } else if (this.state.doc == null || !this.state.doc) { 
     return (<Loading />); 
    } else { 
     return (
      <div className="page"> 
       {this.state.doc.getSliceZone('page.body').slices.map(function(slice, i){ 
        return (<SliceZone slice={slice} key={i} />) 
       })} 
      </div> 
     ) 
    } 
} 

をここでは次のようなDocumentというコンポーネントがあります。

export default class Document extends React.Component { 
static defaultProps = { 
    doc: null, 
    notFound: false 
} 
static propTypes = { 
    doc: React.PropTypes.oneOfType([ 
      React.PropTypes.object, 
      React.PropTypes.array 
    ]), 
    notFound: React.PropTypes.bool.isRequired 
} 
render() { 
    if (this.props.notFound) { 
     return (<Error404 />); 
    } else if (this.props.doc == null || !this.props.doc) { 
     return (<Loading />); 
    } else { 
     return (
      <div className="page"> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 
} 

それから、

2番目の例では、エラーメッセージが（データが読み込まれるまで）すぐに表示されて消えていますが、消えます。私は間違って何をしていますか？最初の例はなぜ機能し、2番目の例はなぜですか？

Answer 1

はあなたの変種で、この

<Document doc={this.state.doc} notFound={this.state.notFound}>   
{ this.state.doc && this.state.doc.getSliceZone('page.body').slices.map(function(slice, i){ 
    return (<SliceZone slice={slice} key={i} />) 
})} 
</Document> 

を試してみてください、あなたはthis.state.doc becuaseエラーがnull参照、それまではデータがロードされ、そしてあなたは、null参照の例外を参照してください、のように見えます。あなたの文書管理に

第一の場合、それは、計算しない第二の場合には、それは最初に計算し、パラメータとして送信された「子ども」