How to do realtime fetching in react native?

Question

Hi in my project there is comment section for a video.So what I'm expecting is showing the comments immediately after a user post it.I've tried componentWillUpdate() method.But it is re-rendering the UI everytime,so causes some shaking in UI.Also I've tried to call the fetch method within the promise of postComment.That means within the fetch of posting a comment I'm trying to call the next fetch for showing the submitted comments.But no use.Following is the code I've tried

code

postComment(){
fetch(GLOBAL.COMMENT + `${this.props.id}/new/0`, {
        method: 'POST',
        headers: {
            'Authorization': token,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            comment_content: this.state.text

        })
    })
    .then((response) => response.json())
    .then((responseData) => {

        this.setState({
            text: '',
            isLoad: false
        })
    }).then(() => {
        fetch(GLOBAL.GET_COMMENT + `${this.state.unit_id}/`, {
                method: 'GET',
                headers: {
                    'Authorization': token
                }
            }).then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    comment: responseData.data,
                    tab2: true,
                    tab3: false,
                    isLoading: false

                })
            });
    })

}

Is there any solution for this? Please help.Any help is appreciated.Thank you!

What you need to do is change the state after a comment is added so it rerenders automatically and displays all comments as soon as they are added. So if the comments are on the back end, after the request is finished, call the function that brings all comments and update state. — squeekyDave, Mar 07 '19 at 11:00
You can add the new posted comment to your flatlist `data` without fetch. You don't need to fetch again — SiSa, Mar 07 '19 at 11:00
@squeekyDave So what change do I need to make in my existing code?Please help. — Linu Sherin, Mar 07 '19 at 11:07
@anu So I assume you have your comments on the back end stored in a DB? If that is the case, then after the post comment request has finished, call a function that will fetch all comments and set the state with the newly fetched comments, which will do a re-render and you will see the new comments as soon as they are posted. — squeekyDave, Mar 07 '19 at 11:09
@squeekyDave So instead of this fetch within promise I've to do something like this `((then) => getComments() )` I'm I right? — Linu Sherin, Mar 07 '19 at 11:12

score 1 · Accepted Answer · answered Mar 07 '19 at 11:14

So it will look something like this, I am not sure how the rest of your code is set up so take this with a pinch of salt.

getComments() {

  fetch(GLOBAL.GET_COMMENT + `${this.state.unit_id}/`, {
                method: 'GET',
                headers: {
                    'Authorization': token
                }
            })
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    comment: responseData.data,
                    tab2: true,
                    tab3: false,
                    isLoading: false

                })
            });
    })

};

postComment() {
  fetch(GLOBAL.COMMENT + `${this.props.id}/new/0`, {
          method: 'POST',
          headers: {
              'Authorization': token,
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              comment_content: this.state.text

          })
      })
      .then((response) => response.json())
      .then((responseData) => {

          this.getComments();
      })

}

How to do realtime fetching in react native?

1 Answers1