setState 不是函数

Question

我正在尝试在表格中添加一个删除按钮，以便获取el.id 并将其删除。我看不懂el.id，所以我想把它添加到状态中。

请告诉我是否有其他解决方案或是否可以修复。

这是我的代码：

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

您在回调函数中调用 this.setState，因此 this 不会进入预期的上下文。

您可以将this 的值存储在一个变量中：

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

或者你可以使用箭头函数来解决你的问题