React JS + Fetch API 发布

Question

我使用 fetch API 从表单中发布一些数据，这很有效。

但是我遇到了一个问题，问题是当我发布数据时状态不会更新，是的，我知道我没有使用 setState()，但没有任何设置。还没有。

目前我正在尝试通过控制台日志来调试问题，结果发现主体没有被使用。

提交函数：

addContact = (event) => {

      event.preventDefault(); //Prevents The Default Action Of A Form


      const formData = {};

      /* 
      for(let [temp variable] in this.state.contacts) {
        formData[attach temp variable] = to contacts[temp variable].value
      }

      */

      // BASIC TERM: For everything in the contacts config set the formData (Blank Object) equal to the identifier e.g. name, street equal to the state value. The object will then be populated
      // The formData is then attached to an object named object and sent to the firebase database by attaching it to the post request
      for(let formElementIdentifier in this.state.contacts) {
        formData[formElementIdentifier] = this.state.contacts[formElementIdentifier].value;
      }

      const data = {
        persons: formData
      }

      fetch("https://address-book-database.firebaseio.com/contact.json", {
        method: "POST",
        headers : {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
      .then((res) => {
        console.log("Body Used Or Not")
        console.log(res.bodyUsed)
      })
      .then(json => {

      })
    }

这是第一次使用 fetch API。 Tm 真的很困惑为什么这不起作用，任何帮助将不胜感激。我知道链接 .then() 但我无法让它与 POST requet 一起使用。

我要做的就是设置表单中的值并将其附加到请求中，请求需要转换为 JSON，然后需要更新状态。

完整项目：https://github.com/AlexMachin1997/React-JS-Contact-Book/blob/master/src/Components/Contact/Contacts/Contacts.js

Answer 1

使用您的获取请求，如下所示。您需要使用 response.json()。它等待身体加载。

为什么 response.json 会返回一个承诺？

因为当所有标头都到达时您会收到响应。调用 .json() 可以得到一个尚未加载的 http 响应正文的承诺

Why is the response object from JavaScript fetch API a promise?

fetch('https://address-book-database.firebaseio.com/contact.json', {
    method: 'post',
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*'
    },
    body: JSON.stringify(data)
}).then(function (response) {
    return response.json(); //response.json() is resolving its promise. It waits for the body to load
}).then(function (responseData) {
    //Do your logic
});