ReactJS when Fetch POST, and use then function to setState

Question

In my ReactJS project, I use fetch the do the async processing, and after fetch the data,

I want to setState to change my local state. But I get the error return.

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

Fetch function code:

AddDeal(deal){
fetch('shops/1/deals',{
      method: "POST",
      body: JSON.stringify(deal),
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
      },
    }).then(response => {
         response.json().then(data =>{
           this.setState({deals: data}); // and use this.props.dispatch I get `props` of undefined 
         })
      })
}

I have watched the other question like mine React.js: loading JSON data with Fetch API and props from object array

So how can I fix it?

have you tried binding this to AddDeal()? Would be good to include how you execute AddDeal() — Edgar Henriquez
– Edgar Henriquez, Commented Aug 26, 2017 at 14:18
@MayankShukla My React Component, this method is running when I submit the form — Champer Wu
– Champer Wu, Commented Aug 26, 2017 at 14:18

Ben Kolya Mansley · Accepted Answer · 2017-08-26 14:18:41Z

6

When you call fetch(), the value of this will be the response, not the class. You can save the value of this by assigning it to a variable, usually called self.

AddDeal(deal){
  const self = this;
  fetch('shops/1/deals',{
    method: "POST",
    body: JSON.stringify(deal),
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
    },
  }).then(response => {
    response.json().then(data =>{
      self.setState({deals: data});
    })
  })
}

answered Aug 26, 2017 at 14:18

Ben Kolya Mansley

1,79316 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nocebo Over a year ago

Better declare AddDeal like so : AddDeal = (deal) => {...}

Champer Wu Over a year ago

So Is it any association for bind(this) ? I tried to follow the other answer to bind(this) the AddDeal function, but it since did not work.

Ben Kolya Mansley Over a year ago

Two separate issues. For this to work in React, you need to bind the function to the class or use arrow functions. Additionally, fetch overrides this as I explained. this can be quite confusing in JS

Nocebo · Accepted Answer · 2017-08-26 14:20:26Z

1

This will probably solve your issue:

AddDeal = (deal) => {
  fetch('shops/1/deals',{
    method: "POST",
    body: JSON.stringify(deal),
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
    },
  }).then(response => {
    response.json().then(data =>{
      this.setState({deals: data});
    })
  })
}

answered Aug 26, 2017 at 14:20

Nocebo

2,0973 gold badges18 silver badges29 bronze badges

Comments

Kalaikumar Thangasamy · Accepted Answer · 2017-08-26 16:22:29Z

0

Try like this, this is the right approach

constructor(props) {
    super(props)

   ..............
   ..............
   ..............

    this.AddDeal = this.AddDeal.bind(this)
}

answered Aug 26, 2017 at 16:22

Kalaikumar Thangasamy

5642 silver badges8 bronze badges

Comments

Aniruddh Agarwal · Accepted Answer · 2017-08-27 05:57:08Z

-2

I would suggest you to use Axios rather than using fetch, because axios has more great features as compared to Fetch. You can read about the great features of Axios from here Link.

answered Aug 27, 2017 at 5:57

Aniruddh Agarwal

9171 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

ReactJS when Fetch POST, and use then function to setState

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related