在我的许多组件中等待数据的可重用组件

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

我想这移入组件称为文档，看起来像这样：

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

然后我试着用它像th在这里：

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

虽然在第二个例子中错误消息快速显示（直到数据加载），然后消失。我究竟做错了什么？为什么第一个例子工作，第二个例子不工作？

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错误是零，直到数据被加载，你看空引用异常，看起来像。

在第一种情况下，它不会计算，在第二情况下，计算，然后再作为参数发送“孩子”到您的文档控制