re-render component after post request api react

Question

After a post request, the data gets inside the database but it is not re rendering the component. I need to manually press the F5 button and the new data will be displayed. It seems like the then is not executing.

class AddForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: null,
            title: "",
            price: 0,
            pages: 0,
        };
    }

    postData() {
        const { title, price, pages } = this.state
        const curTitle = title
        const curPrice = price
        const curPages = pages
        fetch("api/books", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                Title: title,
                Price: price,
                NumberOfPages: pages
            })
        }).then(res => res.json()).then(() => this.setState({ title: curTitle, price: curPrice, pages: curPages }))
    }
}

Edit: When I do the following:

.then(response => response.json()).then(res => console.log(res))

I get Uncaught (in promise) SyntaxError: Unexpected end of JSON input

What happens if you add `console.log()` instead of `this.setState()` part in `then()`? — norbitrial, Feb 09 '20 at 16:56
@HadiRanjbar, when I'm pressing ```handleSubmit``` in my form. — Giga Meta, Feb 09 '20 at 17:13
@norbitrial, when I do: ```.then(response => console.log(response))```, I get ```Unexpected end of JSON input``` — Giga Meta, Feb 09 '20 at 17:17
Check this post, it may help you: https://stackoverflow.com/questions/43362431/uncaught-in-promise-syntaxerror-unexpected-end-of-json-input — Berg_Durden, Feb 09 '20 at 18:23

score 1 · Answer 1 · answered Feb 09 '20 at 18:27

Well from your question it looks like that you are able to make the state update on submitting, the only problem is regarding displaying the data, for that I may suggest you to put another component for displaying the data. It had worked for me in the past. Just let me know whether it worked for you.

Gangadhar Gandi · Answer 2 · 2020-02-09T17:46:44.747

0

res => res.json(): this gives a JSON response, bind this JSON response values to the state in the setState.

Hoping your response will be like below,

response.data = {
   curTitle: 'some title',
   curPrice: 'some price',
   curPages: 'some pages'
}

Change your fetch call second then function like below,

constructor(props) {
   super(props)
   this.state = {
      id: null,
      title: "",
      price: 0,
      pages: 0,
   };
   this.postData = this.postData.bind(this); // Add this line, cannot read property error will be gone.
}

fetch("api/books", {
    method: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        Title: title,
        Price: price,
        NumberOfPages: pages
    })
}).then(res => res.json()).then((responseJson) => {
  console.log(responseJson); // what is the output of this?
  this.setState({
    title: responseJson.data.curTitle,
    price: responseJson.data.curPrice,
    pages: responseJson.data.curPages
  })
})

edited Feb 09 '20 at 17:46

answered Feb 09 '20 at 16:59

Gangadhar Gandi

2,162
12
19

I tried this solution, but it's not displaying the new data. – Giga Meta Feb 09 '20 at 17:21
What is the output of console.log(response)? – Gangadhar Gandi Feb 09 '20 at 17:22
On trying my solution, is there any error you are getting? – Gangadhar Gandi Feb 09 '20 at 17:32
```Uncaught (in promise) SyntaxError: Unexpected end of JSON input at``` when I console.log(response) – Giga Meta Feb 09 '20 at 17:33
Change the second then callback like above and tell me what the console prints their? – Gangadhar Gandi Feb 09 '20 at 17:36
When I do ```.then(res => console.log(res)```, I get my response with the status etc.. When I do ```then(res => res.json()).then((responseJson => console.log(responseJson))``` I get the error that I mentioned above. – Giga Meta Feb 09 '20 at 17:36
Please exactly do this and tell me: .then((responseJson) => { console.log(responseJson); this.setState({ title: responseJson.data.curTitle, price: responseJson.data.curPrice, pages: responseJson.data.curPages }) }) – Gangadhar Gandi Feb 09 '20 at 17:38
When I exactly type like what you mentioned I get: ```index.js:30 Uncaught (in promise) TypeError: Cannot read property 'title' of undefined```. – Giga Meta Feb 09 '20 at 17:44
Got it. we need to bind this to postData method to solve the above mentioned error. Added a line in constructor. Please add that and check – Gangadhar Gandi Feb 09 '20 at 17:47
I added the bind in the constructor, but it is still the same error. – Giga Meta Feb 09 '20 at 17:52

score -1 · Answer 3 · answered Feb 07 '23 at 08:22

-1

You should create new function which get from back end. Then call this function after post respons

answered Feb 07 '23 at 08:22

Bahajons Blog

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 09 '23 at 18:06

re-render component after post request api react

3 Answers3