CODEWITHSUNDEEP
javascriptreactjsreact-nativefetchreal-time
Anu
Anu

Reputation: 1742

How to do realtime fetching in react native?

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!

Upvotes: 2

Views: 809

Answers (1)

squeekyDave
squeekyDave

Reputation: 962

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();
      })

}

Upvotes: 1

Related Questions