Question

我从子组件调用此函数：

removeWorkout: function (workoutId) {
 return axios.delete('/delete', {
        params: {
          id: workoutId
        }
      }
  .then(function(response){
        this.componentDidMount();
  });
},

服务器删除记录：

app.delete('/delete/:id?', (req, res) => {
  Exr.find({'_id':req.query.id}).remove().exec();
  console.log("server deleting")
  res.send("done")
});

但是this.componentDidMount不起作用，因为这是未定义的。其他功能也可以。

Answer 1

这是一个绑定问题，您需要使用context绑定.bind(this)或使用arrow function，arrow function将为您完成此任务。

使用此：

.then( (response) => {
      this.componentDidMount();
 });

或

.then( function(response) {
      this.componentDidMount();
 }.bind(this));

Answer 2

这不起作用的原因是因为Input : ant Output : 1 Input: str Output : hi INput: rat Output: Field not present被反弹回你的回调函数：

this

解决此问题的方法是使用arrow function，它会保留父级的范围（removeWorkout: function (workoutId) { return axios.delete('/delete', { params: { id: workoutId } } .then(function(response){ // "this" now refers to your function(response){...} callback this.componentDidMount(); }); },将引用您的React组件）：

this

或在输入回调之前将removeWorkout: function (workoutId) { return axios.delete('/delete', { params: { id: workoutId } } .then((response) => { this.componentDidMount(); }); },捕获到变量中：

this

作为旁注，你真的不应该手动触发生命周期方法，最好调用removeWorkout: function (workoutId) { var _this = this; return axios.delete('/delete', { params: { id: workoutId } } .then(function(response){ _this.componentDidMount(); }); },来触发组件更新。

Answer 3

您的问题是JavaScript中的this是一个神奇的关键字，它指的是调用方法的对象。当一个方法没有调用你期望的对象时，这会导致很多问题。关于this在JavaScript here中的工作方式，我们有一些深入的内容。

您可以通过显式绑定您的函数来解决这个问题，以便this始终引用其中的同一个对象。为此，您使用[Function.bind]。（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind）如果您的函数名为＆＃34; function＆＃34;，您可以这样做：

constructor(props) {
    super(props);
    this.function = this.function.bind(this);
}

但是，在这种情况下，您使用的是componentDidMount，这是React组件生命周期的一部分，因此可能不应该绑定它。另一种方法是使用箭头函数，因为箭头函数始终具有静态绑定this：

removeWorkout: (workoutId) => {
 return axios.delete('/delete', {
        params: {
          id: workoutId
        }
      }
  .then(response =>
        this.componentDidMount());
)}

顺便说一句，直接调用componentDidMount()通常是一种不好的做法。您不应该直接调用React生命周期方法。相反，您应该提取要调用的函数，并在此方法和componentDidMount方法中调用它。

React，undefined this

3 个答案: