php - 为什么 fetch POST 返回待处理的 API 调用在 React

Question

我正在尝试创建一个 react 按钮来从服务器发布/检索数据。
我已经发布并检索了，但问题是每当我发布时，如果我检查开发人员工具，它会显示等待 API 调用。如果我刷新页面，我会得到新数据。
这是我的帖子:

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

我的 react 渲染:

<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>

我不明白为什么它卡在待处理状态，因此，我没有得到任何关于 console.log 的信息
你能为我指出正确的方向吗？我是 React 的一个完整的初学者，来自 PHP。

Answer 1

我非常相信这里的错误是因为错误使用 异步/等待 和 promise
使用 Promise 时要记住的事项

在使用 synchronous 时使用 Promise或 blocking code .

确保同时写.catch和 .then所有 promise 的方法。

如果要在所有事情之后做某事，请使用 .finally

Promise 对象中所有方法的返回类型，无论是静态方法还是原型(prototype)方法，再次为 Promise.

使用 Async/Await 时要记住的事项

异步函数返回一个 promise 。

异步函数使用隐式 Promise 来返回结果。即使您不返回 promise明确地，async函数确保您的代码通过 promise 传递。

await阻止 async 中的代码执行函数，其中await statement是一部分。

await语句可以在一个 async 中重载功能