Question

使用React.js我试图显示通过API调用给出的艺术家名称。

我有一个名为ArtistList的类组件，在我的主index.js页面上调用，我正在尝试使用API数据中的艺术家用户名来更新组件的状态。

无论我尝试什么，我似乎都会在浏览器控制台中收到相同的错误消息：

未捕获的TypeError：this.state.artist.map不是函数

import React, { Component } from 'react';
import axios from 'axios';

class ArtistList extends Component {
  constructor(props) {
   super(props);

   this.state = {artist: []};
 }

 componentDidMount() {
   this.ArtistList();
 }

 ArtistList() {
   axios.get('https://api-v2.hearthis.at/feed/?type=popular&page=1&count=20')
     .then((data) => this.setState({ artist: data }));
 }

 render() {
   const artists = this.state.artist.map((item) => (
     <div>
       <h1>{ item.user.username }</h1>
     </div>
   ));

   return (
     <div className="layout-content-wrapper">
       <div className="panel-list">{ artists }</div>
     </div>
   );
 }
}

Answer 1

axios的API会返回一个response对象，其中data是其中一个属性，因此请将其更改为

axios.get('https://api-v2.hearthis.at/feed/?type=popular&page=1&count=20')
  .then(({ data }) => this.setState({ artist: data }));

Answer 2

axios Promise解析为响应对象。 data属性包含有效负载。试试这个：

axios.get('https://api-v2.hearthis.at/feed/?type=popular&page=1&count=20')
  .then((response) => this.setState({
    artist: response.data
  }));

Answer 3

这是工作代码（你的代码看起来很好），你的axios的API遇到了一些问题。

https://jsfiddle.net/RanjeetKumarGautam/69z2wepo/183143/

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

   this.state = {artist: []};
 }

 componentDidMount() {
   this.ArtistList();
 }

 ArtistList() {
   this.setState({ artist: [{user:{username: 'john'}},{user:{username: 'ken'}}] });
 }

 render() {
   const artists = this.state.artist.map((item) => (
     <div key={item.user.username}>
       <h1>{ item.user.username }</h1>
     </div>
   ));

   return (
     <div className="layout-content-wrapper">
       <div className="panel-list">{ artists }</div>
     </div>
   );
 }
}

Answer 4

试试这个

class ArtistList extends React.Component {
    constructor(props){
       this.state = {
          artist: [];
       }
    }
    async componentDidMount() {
        const res = await axios.get('https://api-v2.hearthis.at/feed/?type=popular&page=1&count=20');
        const artist = await res.data;
        this.setState({artist});
    }
    renderArtists = () => {
        if(this.state.artist.length!=0){
            return this.state.artist.map(item => {
                return (
                   <div>
                     <h1>{ item.user.username }</h1>
                   </div>
                )
            });
        }
    }
    render(){
        return (
           <div className="layout-content-wrapper">
             <div className="panel-list">{this.renderArtist()}</div>
           </div>
        )
    }
}

通过React.js中的API调用返回一个名称

4 个答案: