React JS + Fetch API Posting

Question

I using the fetch API to post some data from a form, that works.

However I'm facing an issue, the issue is when I post data the state doesn't update, Yes I know I'm not using the setState() but there's nothing set it to. yet.

Currently I'm attempting to debug the issue by console logging, and it turns out the body isn't been used.

Submit Function :

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

      })
    }

This is the first time using the fetch API. Tm really confused why this wont work, any help would greatly be appreciated. Im aware of chaining .then() but I couldnt get it to work with the POST requet.

All I want to do is set the values from my form and attach it to the request, the request needs to be converted to JSON, then the state needs to be updated.

Full Project : https://github.com/AlexMachin1997/React-JS-Contact-Book/blob/master/src/Components/Contact/Contacts/Contacts.js

Try to use `JSON.stringify` on `this.state.contacts` directly and send that instead. Also return `res.json()` from your first `then` after the fetch, and see what you get. — Tholle, Jul 02 '18 at 22:29
So it seems name can only be accessed, even though the entire state gets submitted to the database. — Alex Machin, Jul 03 '18 at 08:29

score 3 · Answer 1 · answered Jul 03 '18 at 06:17

3

Use your fetch request like below. You need to use response.json(). It waits for the body to load.

Why does response.json return a promise?

Because you receive the response when all headers have arrived. Calling .json() gets you a promise for the body of the http response that is yet to be loaded

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

answered Jul 03 '18 at 06:17

Jeeva

1,550
12
15

After adding the Access control header It seems I only have access to the name value even though all the values get submitted to the firebase database. – Alex Machin Jul 03 '18 at 09:04
Did you got the response from it? – Jeeva Jul 03 '18 at 09:07
Can you kindly show me your values inside the this.state.contacts, sample json – Jeeva Jul 03 '18 at 09:13
This is what gets logged on submit of the form : App.js:93 Alex Machin App.js:93 AlexMachin1997@gmail.com App.js:93 121212121221 App.js:113 JSON Data App.js:114 {name: "-LGUXG4vFeQ8t7WQdax9"} name : "-LGUXG4vFeQ8t7WQdax9" __proto__ : Object – Alex Machin Jul 03 '18 at 09:49
Its logging the firebase ID for some reason – Alex Machin Jul 03 '18 at 09:51
Can you kindly check your data which are you sending it to the firebase. Is it constructed as expected. – Jeeva Jul 03 '18 at 09:54

React JS + Fetch API Posting

1 Answers1