TypeError：this.state.champions.map不是函數

Question

我通過后端的API提取數據，而不是從前端的API提取數據，我應該從服務器提取數據，我應該將其推送為空數組中的狀態，以便我可以進行映射，但我一直在獲取

TypeError：this.state.champions.map不是函數

import React, { Component } from "react";
import axios from "axios";
class Champions extends Component {
  constructor(props) {
    super(props);

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

  componentWillMount() {
    axios.get("/api/Champions").then(response => {
      this.setState({ champions: response.data });
      // console.log(response);
    });
  }

  render() {
    console.log(this.state.champions);
    // let champions = this.state.champions;
    let champList = this.state.champions.map((elem, ind) => {
      return <div key={elem} className="champCard" />;
    });
    return <div className="App">{champList}</div>;
  }
}

export default Champions;

我的console.log

Answer 1

您在response.data收到一個對象，而不是一個數組。

因此，您可以將其轉換為一系列冠軍，例如：

componentWillMount() {
  axios.get("/api/Champions").then(response => {
    this.setState({ champions: Object.values(response.data) });
  });
}

更新：

正如評論中所建議-在這種情況下，最好使用componentDidMount而不是componentWillMount 。 請閱讀有關componentDidMount的更多信息