setState不是函数

Question

I'm trying to add a delete button to the table so I can get el.id and delete it. I can't read el.id , so I wanted to add it to states.

Please tell me if there is another solution or if it can be fixed.

This is my code:

componentDidMount: function(){
       var url = 'I have an api here'

       axios.get(url).then(function(response){
         var arr = $.map(response.data, function(el) {
           $.each(el, function (i, word) {
             this.setState({el: el});
               $("#data").append(
                 '<tr><td>' + el.name + '</td><td>' + el.email + '</td><td>' + el.category + '</td><td>' + el.address + '</td><td>' + '<button onClick={console.log(el)} class="btn btn-primary">delete</button>'
               );
           });
         });
         $('body').addClass('stop-scrolling');
       })
  },

Answer 1

you're calling this.setState inside a callback function so this doesn't to the expected context.

you can store the value of this inside a variable :

componentDidMount: function(){
   var url = 'I have an api here';
   var self = this;

   axios.get(url).then(function(response){
     var arr = $.map(response.data, function(el) {
       $.each(el, function (i, word) {
         self.setState({el: el});
         $("#data").append('<tr><td>' + el.name + '</td><td>' + el.email + '</td><td>' + el.category + '</td><td>' + el.address + '</td><td>' + '<button onClick={console.log(el)} class="btn btn-primary">delete</button>');
       });
     });
     $('body').addClass('stop-scrolling');
   })
},

or you can use arrow function to solve your problem