は、私は、子コンポーネントからこの関数を呼んでいるこの

Question

を未定義反応します。他の関数も動作します。

Answer 1

.bind(this)を使用してcontextをバインドするか、arrow functionを使用すると、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(); 
    }); 
}, 

あなたが解決方法：

使用すると、この：thisは、あなたのコールバック関数にリバウンドますので、これは動作していない

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

または

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

Answer 2

理由がありますこの問題はarrow functionを使用して親のスコープ（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(); 
    }); 
}, 

を、あなたが本当に手動でトリガすべきではありませんライフサイクルメソッドの場合、setStateを呼び出してコンポーネントの更新をトリガーすることが望ましいでしょう。

Answer 3

JavaScriptのthisは、メソッドが呼び出されたオブジェクトを参照する魔法のキーワードです。これは、期待しているオブジェクトに対してメソッドが呼び出されないと、多くの問題を引き起こす可能性があります。 JavaScriptでがどのように動作するかについての詳細なコンテンツがあります。here

明示的に関数をバインドして、thisが常にその中の同じオブジェクトを参照するようにすることで回避できます。 。

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

ただし、この場合には、あなたがその一部であるcomponentDidMountを、使用している：あなたは[Function.bind]使用（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind）あなたの関数は、「機能」と命名されている場合は、あなたが行うことができますすることを行うために、あなたはおそらくそれをバインドすべきではありません。直接componentDidMount()を呼び出すと、通常は悪い習慣で、

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

ところで：代替矢印関数は常に静的にバインドされthisを持っているように、矢印の機能を使用することです。 React lifecycleメソッドを直接呼び出すべきではありません。代わりに、このメソッドとcomponentDidMountメソッドの両方で呼び出す関数を抽出して呼び出す必要があります。