如何使用该 API？反应获取[关闭]答案

【问题标题】：How to use that API? React fetch [closed]如何使用该 API？反应获取[关闭]
【发布时间】：2020-02-06 19:25:28
【问题描述】：

我在一个小项目上需要帮助。我想用由两部分组成的 API 在 React 中做应用程序：

search 类型字段用于输入艺术家或作品名称
满足搜索条件的结果列表，其中每一项包含：一种。艺术家湾。作品名称 C。制表类型

API 链接：https://www.songsterr.com/a/wa/api

这就是我所做的，但我有一些问题：我如何使用 fetch 来捕捉所有歌曲？这该怎么做： 1. 用户可以在搜索栏输入作品或艺术家的名字。 2. 当你点击Search 按钮时，你会得到一个包含结果的列表。

class Search extends Component {
state = {
    searchValue: '',
    songs: []
};
handleOnChange = event => {
    this.setState({searchValue: event.target.value})
}
handleSearch = () => {
    this.makeApiCall(this.state.SearchValue)
}

makeApiCall = searchInput => {
    let api_url = `?????????'

    fetch(api_url)
    .then(response => {
        return response.json();
    })

}
render() {
    return (
    <>
     <h1>Welcome</h1>
    <input name="text" type="search" placeholder="Search" onChange={event => this.handleOnChange(event)} value={this.state.SearchValue}/>
    <button onClick={this.handleSearch}>Search</button>
    {this.state.songs ? (
        <div>
            {this.state.songs.map((song, index)=>(
            <div key={index}>
                <h1>{song.nameWithoutThePrefix}</h1>
            </div>    


             )) }
        </div>

    ) : (
        <p>Something</p>
    )}
    </>
    )}

}

我知道将这个应用程序划分为更小的组件，但在此之前我想做这个应用程序的所有逻辑。请帮忙！

【问题讨论】：

标签： reactjs api input fetch

【解决方案1】：

不知道为什么这被否决，但这是一个工作示例

Sandbox solution

根据提供的链接，艺术家端点的 json api 搜索是：

https://www.songsterr.com/a/ra/songs/byartists.json?artists={comma seperated artists names}

片段

import React from "react";

class Search extends React.Component {
  state = {
    searchValue: "",
    songs: []
  };

  handleOnChange = event => {
    this.setState({ searchValue: event.target.value });
  };

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };

  makeApiCall = async (searchInput) => {
    let api_url = `https://www.songsterr.com/a/ra/songs/byartists.json?artists=${searchInput}`;

    const response = await fetch(api_url);
    const songs = await response.json();

    this.setState({ songs });
  };

  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <input
          name="text"
          type="search"
          placeholder="Search"
          onChange={event => this.handleOnChange(event)}
          value={this.state.SearchValue}
        />
        <button onClick={this.handleSearch}>Search</button>
        {this.state.songs ? (
          <div>
            {this.state.songs.map((song, index) => (
              <div key={index}>
                <h1>{song.title}</h1>
              </div>
            ))}
          </div>
        ) : (
          <p>Something</p>
        )}
      </div>
    );
  }
}

export default Search;

【讨论】：