React.js - onChange undefined

我在應用程序中使用了last.fm API，我正在抓相關的藝術家。因此，您的想法是搜索一位藝術家，並返回相關藝術家列表。React.js - onChange undefined

如果我使用'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"));

來源

2017-06-14 Joe Consterdine

'this.searchArtist'方法內'console.log（this.searchArtists）'的輸出是什麼？ – webdeb

如果不知道「返回錯誤結果」的含義，很難診斷問題。我最初的猜測是你正在錯誤地考慮onChange。

onchange發生每一個文本變化。如果我在文本字段中鍵入「Bob Dylan」，onChange會在我輸入時爲每個更改觸發一次（例如，「B」，「Bo」，「Bob」，「Bobe」，「Bob」（刪除e），「鮑勃」...）。因此你會發射很多API請求。這對自動完成來說很好，但需要限速，智能響應排序等，與您的用例不同。

聽起來你只想在用戶完成他們的想法後觸發一個API請求。要做到這一點，你應該嘗試onfocusout或onblur屬性 - 正如它們的名字暗示的那樣，當用戶完成輸入並離開文本字段時，它們將會觸發。

來源

2017-06-14 21:22:40

嗨，你的解釋是正確的，這正是我想要做的。我的困惑是，如果它要求API的每一個字母，而不是在藝術家的最後一封信被輸入後爲什麼不能獲得正確的結果？當你點擊外部時，FWIW onBlur可以正常工作，但在輸入內容的時候你肯定可以做到，因爲我已經看到了它的例子。 –

假設人們每秒輸入約5個字符，則您每秒發送5個api請求。每個請求都需要不可預知的時間進行響應，並且一些API會限制您每秒可以進行的請求數。所以，你有一串無序的響應回來，你不能認爲你最近的請求對應於最近的響應。 RxJS是處理這個問題的好工具 - 並且查找速率限制。 –

是的，這一切都是有道理的，還有Stephen Grider的視頻，他使用YouTube API搜索並使用onchange，因爲我不太確定。也許這是更快的迴應！感謝您的幫助。 –

-1

你不應該路過的事件通過與onChange處理？

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

^唯一的代碼，你應該需要的，如果一切如果正確的話

而你需要裁判，除非我的誤解改變。您可以在事件處理程序中獲取輸入字段的值event.target.value。

來源

2017-06-14 21:13:43 ceckenrode

React.js - onChange undefined

回答

相關問題