javascript - 可重用组件来等待数据

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

然后我尝试在这里使用它:

<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 为 null，直到加载数据，并且您会看到 null 引用异常，看起来像这样。

在第一种情况下，它不计算，在第二种情况下，它首先计算，然后作为参数“children”发送到您的文档控件