时间戳

首页 > 解决方案 > map 有什么问题不是函数？

reactjs - map 有什么问题不是函数？

问题描述

请在这件事上给予我帮助

我刚刚了解了 ReactJs，现在我了解了从 Api 获取数据，在此之前我使用 fetch 来获取 api 并且它正常但是当我使用 Axios 并遇到这个问题时

import React, { Component } from 'react';
import './App.css';
import Axios from 'axios'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {

    Axios({
      method: "GET",
      url: "https://reqres.in/api/users"
    }).then(res => {
      this.setState({
        isLoaded: true,
        items: res.data
      })
      console.log(res.data)

    }).catch(err => {
      console.log(err)

    })
  }

  render() {
    const { error, isLoaded, items = [] } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          {items.map(function (item, i) {
            return <div key={i}>
              <p>{item.id}</p>
              <img src={item.avatar} alt="Card" />
            </div>
          })}
        </div>
      );
    }
  }
}

export default App;

这是来自 reqres 的数据

    {"page":1,"per_page":3,"total":12,"total_pages":4,"data":
    [  {"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},
 {"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},
  {"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}
]}

这是反应的错误

反应错误

我只想显示我的数据:(

标签： reactjs

解决方案

查看 API 响应的语句应该是

items: res.data.data

推荐阅读