React:AddListener()でsetStateを使用する方法は?

セドリックブルーム

ボタンをクリックするまでまだ存在しないデータにaddListenerを呼び出すメソッドがあります。ただし、そのデータを状態内に設定しようとすると、次のエラーが発生します。

TypeError:this.setStateは関数ではありません

私は次のようにdataHandlerをバインドしようとしました:

this.dataHandler = this.dataHandler.bind(this)

それでも、このエラーが返されます。ここで何を忘れているのですか?

constructor(props){
    super(props)
    this.state = {
        selActive: 4,
        loaded: false,
        mapInfo: ''
    }
    this.onScriptLoad = this.onScriptLoad.bind(this)
    this.dataHandler = this.dataHandler.bind(this)
}

dataHandler = (getJson) => {
    fetch(getJson)
        .then(response => response.json())
        .then(featureCollection => 
            dataLayer = map.data.addGeoJson(featureCollection)
        );
    map.data.addListener('mouseover', function(event) {
        map.data.revertStyle();
        map.data.overrideStyle(event.feature, {fillColor: 'blue'});
        // THIS IS WHERE I ADD MY SETSTATE. 
        // HOWEVER, THIS RETURNS AN ERROR ON HOVER
        this.setState({mapInfo: event.feature.countryNL})
    });
}
ハイファム

JavaScriptthisでは、実行中の関数の「所有者」を常に参照します。つまり、関数がメソッドであるオブジェクトを参照します。代わりに矢印関数を使用してください。矢印関数には独自のthis/super/argumentsバインディングはありません親の字句スコープからそれらを継承します。

map.data.addListener('mouseover', (event) => {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    // THIS IS WHERE I ADD MY SETSTATE. 
    // HOWEVER, THIS RETURNS AN ERROR ON HOVER
    this.setState({mapInfo: event.feature.countryNL})
});

参照:

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

addListenerで変数を送信する方法は?

React to setStateでfetch()APIを使用する方法

setStateで破壊を使用する方法は?

機能コンポーネントReactでsetStateを使用する方法は?

react-native:react-nativeで動的状態をsetState()する方法は?

ReactフックでuseEffectでsetStateを回避する方法は?

React setState Delayを回避する方法は?

react-nativeのComponentDidUpdateでprops値をsetStateする方法は?

TypescriptをReactする方法setState

StatefulWidgetなしでsetStateを使用する方法は?

SearchDelegateでsetStateを使用する方法

ReactでsetState()を使用して配列の値を空白/クリアする方法

React:後続の setState() 呼び出しで this.state を使用する方法は? this.state を強制的に更新するにはどうすればよいですか?

ReactでクラスオブジェクトをsetStateする方法は?

ReactでsetStateへの非同期呼び出しを処理する方法は?

ReactでPaperJを使用する方法は?

React HooksでcomponentWillMount()を使用する方法は?

React HooksでcomponentWillMount()を使用する方法は?

ReactでMSALを使用する方法は?

reactでfontawesomeを使用する方法は?

ReactでIntersectionObserverを使用する方法は?

ReactでsetIntervalを使用する方法は?

React NativeでcomponentWillUnmountを使用する方法は?

React内でanimejsを使用する方法は?

flutterでsetState()を使用する代わりの方法は何ですか?

ListViewでsetStateを使用する

ReactでsetStateを使用して配列要素を更新するにはどうすればよいですか?

React同期プロセスでsetStateを作成する方法

useEffect内でsetStateを使用するときにReactコードで無限ループを防ぐ方法

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    Railsで宝石のレイアウトを使用するにはどうすればよいですか?

  3. 3

    Chromeウェブアプリのウェブビューの高さの問題

  4. 4

    Ansibleで複数行のシェルスクリプトを実行する方法

  5. 5

    アンドロイド9 - キーストア例外android.os.ServiceSpecificException

  6. 6

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  7. 7

    CSSのみを使用して三角形のアニメーションを作成する方法

  8. 8

    Google Playストア:アプリページにリーダーボードと実績のアイコン/バッジが表示されない

  9. 9

    GoDaddyでのCKEditorとKCfinderの画像プレビュー

  10. 10

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  11. 11

    Windows 7では、一部のプログラムは「ビジュアルテーマを無効にする」レジストリ設定を行いませんか?

  12. 12

    Get-ADGroupMember:このリクエストのサイズ制限を超えました

  13. 13

    Pyusb can't find a device while libusb can

  14. 14

    MySQLでJSON_LENGTHとJSON_EXTRACTを組み合わせる方法は?

  15. 15

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  16. 16

    Swiftのブロックのパラメーターに関するドキュメントのマークアップ形式は何ですか?

  17. 17

    Reactでclsxを使用する方法

  18. 18

    追加後、ブートストラップマルチセレクトがテーブルで機能しない

  19. 19

    MongoDB Compass: How to select Distinct Values of a Field

  20. 20

    「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

  21. 21

    複数行ヘッダーのJTableヘッダーテキストの折り返し(カスタムTableCellRenderer)

ホットタグ

アーカイブ