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?

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?

• javascript
• reactjs
• fetch

• from where you are calling AddDeal method? – Mayank Shukla Commented Aug 26, 2017 at 14:14
• Do you bind AddDeal? – Nocebo Commented Aug 26, 2017 at 14:18
• have you tried binding this to AddDeal()? Would be good to include how you execute AddDeal() – Edgar Henriquez Commented Aug 26, 2017 at 14:18
• @MayankShukla My React Component, this method is running when I submit the form – Champer Wu Commented Aug 26, 2017 at 14:18
• @edgaromar90 I haven't bind.this.AddDeal(). Let me try – Champer Wu Commented Aug 26, 2017 at 14:19

4 Answers 4

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

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

Try like this, this is the right approach

constructor(props) {
    super(props)

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

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

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