React.js - onChange undefined

Question

私のアプリでlast.fm APIが動作しています。私は関連するアーティストをつかんでいます。だからアイデアはアーティストを検索し、関連するアーティストのリストを返します。

私は 'onClick'を使用すると、入力値を取得するので完璧に機能しますが、 'onChange'を使用したいので間違った結果を返すようです。私はそれがいくつかのステージや何かで未定義だからだと思う！

これを修正する方法はありますか？

// AJAX

import axios from "axios"; 

module.exports = { 
    fetchArtistCategory: (artist) => { 
    let key = "12345"; 
    let encodedURI = window.encodeURI('http://ws.audioscrobbler.com/2.0/?method=artist.getsimilar&artist=' + artist + '&api_key=' + key + '&format=json'); 
    return axios.get(encodedURI) 
    .then((res) => { 
     return res 
    }); 
    } 
} 

//アプリケーション

import React from "react"; 
import {render} from "react-dom"; 
import Artists from "./components/Artists.js"; 
import Api from "./components/Api.js"; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     artist: [], 
    } 

    this.searchArtist = this.searchArtist.bind(this); 
    } 
    componentDidMount() { 

    } 
    searchArtist() { 
    Api.fetchArtistCategory(this.searchArtists.value) 
    .then((res) => { 
     this.setState({ 
     artist: res.data.similarartists.artist 
     }); 
    }) 
    } 
    render() { 
    return (
     <div> 
     <Artists artistValue={this.state.artist} /> 
     <input type="text" placeholder="Search artist" ref={(ref) => this.searchArtists = ref} onChange={this.searchArtist} /> 
     <input type="submit"/> 
     </div> 
    ) 
    } 
} 

render(<App />, document.getElementById("main")); 

Answer 1

「間違った結果を返す」ということを知らずに問題を診断するのは難しいです。私の最初の推測では、あなたは誤ってonChangeを考えているということです。

onchangeすべてのテキストの変更ごとに発生します。 "B"、 "Bo"、 "Bob"、 "Bobe"、 "Bob"（eを削除する）などの入力時に、変更するたびにonChangeが1回点火します。 "ボブ "...）。したがって、多くのAPIリクエストが発生します。これはオートコンプリートでは問題ありませんが、レート制限やスマートレスポンスの注文などが必要です。これはあなたとは異なるユースケースです。

ユーザーが思考を完了した後でAPIリクエストを1回だけ実行したいと思うようです。これを行うには、onfocusoutまたはonblur属性を試してください。名前が示すとおり、ユーザーが入力を完了してテキストフィールドを終了したときに発生します。

Answer 2

あなたはのonChangeハンドラでを通じてイベントを渡すべきではありませんか？

searchArtist(event) { 
    Api.fetchArtistCategory(event.target.value) 
    .then((res) => { 
     this.setState({ 
     artist: res.data.similarartists.artist 
     }); 
    }) 
    } 

^あなたは私が誤解をしていない限り、他のすべてが

し、正しい場合は、参照が必要な場合は変更する必要がなければならないコードの唯一の作品。入力フィールドの値は、イベントハンドラの内部にevent.target.valueとして取得されます。