Why does Appbase return 'undefined' before returning the correct item?

Question

I am playing around with AppBase.io as a database and I don\'t understand why this component renders twice after getting an item? It seems as if the AppBase \"database\" ret

Answer 1

It doesn't. The asynchronous call you start in componentWillMount doesn't hold up the rendering process (which is good), so render is called before the call completes, so this.state.item._id is undefined because at that point, this.state.item is '' (the value you set in your constructor).

This is perfectly normal, just ensure that you render the component in an appropriate way for when it doesn't have the information yet, e.g.:

var appbaseRef = new Appbase({
  url: "https://JHtFTzy4H:d083068b-596c-489d-9244-8db2ed316e79@scalr.api.appbase.io",
  app: "winwin"
});


class ItemFull extends React.Component {
  constructor() {
    super();
    this.state = {
      item: ''
    }
  }

  componentWillMount() {
    appbaseRef.get({
      type: "items",
      id: 'AWI5K7Q-5Q83Zq9GZnED'
    }).on('data', (response) => {
      this.setState({
        item: response
      });

    }).on('error', function(error) {
      console.log(error)
    })
  }


  render() {
    return <div>{this.state.item._id ? this.state.item._id : "loading..."}</div>;
  }
}



ReactDOM.render(<ItemFull />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/2.2.11/appbase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

If the component shouldn't be rendered at all before you have that information, then you're requesting it in the wrong place. :-) You'd request it in the parent component and only render this component when you have the information (passing the information in props), something like this:

var appbaseRef = new Appbase({
  url: "https://JHtFTzy4H:d083068b-596c-489d-9244-8db2ed316e79@scalr.api.appbase.io",
  app: "winwin"
});

class ParentComponent extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {item: null};
  }
  
  componentWillMount() {
    appbaseRef.get({
      type: "items",
      id: 'AWI5K7Q-5Q83Zq9GZnED'
    }).on('data', (response) => {
      this.setState({
        item: response
      });
    }).on('error', function(error) {
      console.log(error)
    })
  }
  
  render() {
    return this.state.item ? <ItemFull item={this.state.item} /> : <div>loading...</div>;
  }
}

class ItemFull extends React.Component {

  render() {
    return <div>{this.props.item._id}</div>;
  }
}

ReactDOM.render( <ParentComponent /> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/appbase-js/2.2.11/appbase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

That's because appbaseRef.get is asynchronous. ItemFull does its initial rendering and you see first console.log

this.state.item._id at the first time actually checks for _id in a String Object ("") which is of course undefined.

Then this.setState is called in componentWillMount (which has already been mounted and rendered at least once) and updates the state forcing component to rerender because of state change.

This is why you see 2 console logs.

You cant prevent render() hook from executing but you can make sure that you render your content only when the data has arrived:

render() {
  console.log(this.state.item._id, '<-- console_log');

  if(this.state.item) { // this will check if item is different than ''
    return ( 
      <div> 

      </div>
    )
  }
}

one more thing. Use componentDidMount for initial data fetching as it's the recommended place.