Why fetch POST returns pending for the API call in React

user_11788030 0
Viewed 752

I am trying to create a reactions button to post / retrieve data from the server. I have did the post and retrieve, but the issue is that whenever I post, if I check developer tools, it says PENDING for the api call. If i refresh the page, I get the new data.

Here is my post:

getId = async(reaction) => {

      let eSlug = this.state.slug;

      let data = {
          reactiond: reaction,
          eSlugd: eSlug
      }
      
        await fetch("http://localhost:9000/react/",
        {
            method: "post",
            headers: { 
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then(response => response.json())
          .then(data => {
            console.log(data)
          });
  }

My reaction render:

<div className="row">
            <div className="col-all">
              <button className="emoji-static">
                <span className="emoji-like">Like</span>
                <span className="emoji-container">
                  <span className="emoji cool zoom" onClick={this.getId.bind(null,"1")}>
                    <img className="svg" src="/img/svg/cool.svg" alt="Cool" />
                    <span className="counter">{this.state.coolReaction}</span>
                  </span>
                  <span className="emoji love zoom" onClick={this.getId.bind(null,"2")}>
                    <img className="svg" src="/img/svg/love.svg" alt="Love" />
                    <span className="counter">{this.state.loveReaction}</span>
                  </span>
                  <span className="emoji laugh zoom" onClick={this.getId.bind(null,"3")}>
                    <img className="svg" src="/img/svg/laugh.svg" alt="Laugh" />
                    <span className="counter">{this.state.laughReaction}</span>
                  </span>
                  <span className="emoji sad zoom" onClick={this.getId.bind(null,"4")}>
                    <img className="svg" src="/img/svg/sad.svg" alt="Sad" />
                    <span className="counter">{this.state.sadReaction}</span>
                  </span>
                  <span className="emoji zoom" onClick={this.getId.bind(null,"5")}>
                    <img className="svg" src="/img/svg/angry.svg" alt="Angry" />
                    <span className="counter">{this.state.angryReaction}</span>
                  </span>
                </span>
              </button>
            </div>
        </div>

I do not understand why is it stuck in pending and because of this, I do not get anything for console.log Can you point me in the right direction? I am a complete beginner in React, coming from PHP.

reactjs php
1 Answers

I highly believe the bug here is because of the wrong use of async/await and promises

Things to keep in mind when working with promises

  • Use promises whenever you are using synchronous or blocking code.
  • Make sure to write both .catch and .then methods for all the promises.
  • If something is to be done after everything use .finally
  • The return type of all the methods in the Promise object, regardless of whether they are static methods or prototype methods, is again a Promise.

Things to keep in mind when working with Async/Await

  • async functions return a promise.
  • async functions use an implicit Promise to return results. Even if you don’t return a promise explicitly, the async function makes sure that your code is passed through a promise.
  • await blocks the code execution within the async function, of which await statement is a part.
  • await statements can be overloaded in one async function
user_144271250
Related