2017-10-12 7 views
0

は、私は、次の作業のコードを持っています。 this.setStateを使用してReactJSと「この」

は、このエラーが生成されます。

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

は、なぜ私は、このサンプルコードでは、仕事を得るために理解していない、このハックを使用する必要がありますか?それは私には意味をなさない。

+3

:ここ

axios.all(promises).then((results) => { //changing to an arrow function where the arrow function does not bind it's own "this" scope results.forEach((response) => { toReturn.push(response.data); console.log("toReturn: " + toReturn); this.setState({ post: toReturn }); }); }); 

は矢印の機能と、「この」についてinformationもう少しです。しかし、(results)=> {... code}のような矢印関数を使用すると、このクラスへのアクセス権が得られます。私は、約束の中の「これ」は約束の範囲を参照するだけで、その範囲を超えて見ることができると信じています。 –

+1

ここまでfetchpostメソッドを呼び出していますfetchpostメソッドは、この "this"をバインドしていないので参照している "this"オブジェクトを知るように、メソッドにthisをバインドするだけで済みます。反応のプロパティとメソッドを含むプレーンな "this"オブジェクトではありません –

+0

彼は太い矢印の関数の代わりに宣言された関数を使用しているので、これは正しい@dream_capです。 fat arrow関数は親からthisへのアクセス権を得ますが、 'this'のスコープはfetchPost関数だけです – patrick

答えて

1

私はその変数がクラス/コンポーネントレベルでスコープがあると思うので、そのレベルのものにアクセスできます。しかし、(results)=> {... code}のような矢印関数を使用すると、このクラスへのアクセス権が得られます。私は、約束の中の「これ」は約束の範囲を参照するだけで、その範囲を超えて見ることができると信じています。私はあなたがそのレベルで何でもへのアクセス権を持っているので、その変数は、クラス/コンポーネントレベルでスコープされ信じて

No binding of this: Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.