react firebase array length 0

Question

I took the data in firebase and setState, this.state.data array is stamped with 0.

I do not know why, I need your help.

constructor() {
    super();
    this.state = {
        data:[],
    }
}


componentDidMount(){
    this.getData();
}

getData(){
    const arrayItem = [];
    firebase.database().ref('data').on('value', (snapshot) =>{
        snapshot.forEach(function(childSnap){
            arrayItem.push({
                key:childSnap.key,
                data:childSnap.val()
            })
        })
    })
    this.setState({
        data:arrayItem
    })
}

render() {
    {console.log(this.state.data)}

Tholle · Accepted Answer · 2018-08-06 15:26:53Z

3

The firebase logic is asynchronous, so you must use setState inside of the on callback, or the arrayItem array will be empty.

Example

getData() {
  firebase
    .database()
    .ref("data")
    .on("value", snapshot => {
      const data = [];

      snapshot.forEach(function(childSnap) {
        data.push({
          key: childSnap.key,
          data: childSnap.val()
        });
      });

      this.setState({ data });
    });
}

answered Aug 6, 2018 at 15:26

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react firebase array length 0

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related