javascript - React.js - onChange 未定义

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 每次文本更改都会触发。如果我在你的文本字段中输入“Bob Dylan”，onChange 会在我输入时为每次更改触发一次(例如“B”，“Bo”，“Bob”，“Bobe”，“Bob”(删除 e)， “鲍勃”......)。因此，您将触发大量 API 请求。这适用于自动完成，但需要速率限制、智能响应排序等，并且与您的用例不同。

听起来您只想在用户完成他们的想法后触发一个 API 请求。为此，您应该尝试使用 onfocusout 或 onblur 属性——顾名思义，它们将在用户完成输入并离开文本字段时触发。