Question

我正在创建一个消耗数据API的实时仪表板。该应用程序是一个构建在节点API之上的同构反应应用程序，我使用的是Flux架构，更具体地说是alt implementation。

在初始页面加载时，我调用componentDidMount并将操作传递给获取数据

componentDidMount() {
   MyActions.getData();
   MyStore.listen(this._onChange);
}

由于这是调用外部API，因此获取数据会有延迟，这意味着容纳数据的状态为undefined。为了阻止组件错误，因为我将传递undefined数据，我目前正在执行以下操作：

render() {

   let foo;

   if(typeof this.state.apiData == "undefined") {
       foo = (<div></div>
    } else {
        foo = (<MyComponent data={this.state.apiData} />)
    );
}

虽然这有效但感觉不是很优雅，有没有更好的方法在渲染组件之前捕获undefined数据？

Answer 1

您可以使用componentWillMount()开始获取数据。你在render()函数中进行的检查可能如下所示：

render() {
  if (this.state.apiData === undefined) {
    return null;
  }

  return (
    <MyComponent data={this.state.apiData} />
  );
}

另外，当您提到数据更改时，可能需要使用componentWillReceiveProps()检查更改并在需要时重新呈现

将未定义的数据传递给React组件

1 个答案: