反応ネイティブ - コンポーネント機能

内SETSTATEにアクセスすることはできません私は反応し、ネイティブ学んだし、今私は、このエラーと状態のレッスンにstuckedだ：反応ネイティブ - コンポーネント機能

_this2.setState is not a function.

ここでは、コードの現在のブロックです。

... 
export default class StopWatch extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     timeElapsed: null 
    } 
    } 

    handleStartStopClick(){ 
    var startTime = new Date(); 

    setInterval(() => { 
     this.setState(previousState => { 
     return {timeElapsed:new Date() - startTime}; 
     }); 
    }, 100); 
    } 
...

私は間違っていますか？

出典

2017-07-13 anderlaini

handleStartStopClickと、コンストラクタであなたの関数がthisがあなたのクラスのではないコンテキストから呼び出された定義しなければなりませんインスタンス。クリックハンドラとして渡す関数に.bind(this)を追加することで回避できます。

<TouchableHighlight onPress={this.handleStartStopClick.bind(this)}>

出典

2017-07-13 13:37:22

で直接矢印機能を使うこともできます！私は 'bind（this） 'ブロックを見逃していました！ありがとうございました！ – anderlaini

これに加えて、onPressではなくコンストラクタで関数をバインドすることをお勧めします。それ以外の場合は、コンポーネントが再レンダリングされるたびに関数をバインドし、パフォーマンスが低下する可能性があります。 –

@AntoineGrandchamp間違いなく、これはそれを実行するための演奏方法です –

ことは、これを試してみてください：

this.setState({timeElapsed : (new Date() - startTime)})

あなたはバインド（この）または

handleStartStopClick =() => {...}

出典

2017-07-13 13:36:53

推奨されないバージョンの 'setState'の使用はどのように助けますか？ –

私は、問題はsetStateは関数ではなく、ある州を別の州にも設定していると思います。このように： this.setState（状態：設定したい値） –

はい。問題は、 'handleStartStopClick'がバインディングせずに呼び出され、コンテキストが間違っていることです。したがって、あなたの答えは役に立たないだけでなく、廃止予定のAPIを促進します。 –

反応ネイティブ - コンポーネント機能

答えて

関連する問題