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

Question

I am creating a realtime dashboard which consumes an API for the data. The application is an isomorphic react app built on top of a node API, I am using the Flux architecture, more specifically the alt implementation .

On initial page load I call componentDidMount and pass the action to fetch data

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

As this is calling an external API there is a delay in fetching the data, this means the state which will house the data is undefined . In order to stop the component erroring as I would be passing undefined data I am currently doing the following:

render() {

   let foo;

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

Although this works it doesn't feel very elegant, is there a better way to catch undefined data before rendering components?

Answer 1

what you could do is use componentWillMount() to start fetching the data. and the check you are doing in your render() function could look like:

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

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

Also as you mentioned that you data changes it might be worth to make use of componentWillReceiveProps() to check for changes and rerender if needed