TypeError：無法讀取未定義React.js的屬性“ map”

Question

我正在嘗試從Web API解析數據並將其顯示在我的react頁面上，連接成功並且數據已解析（我可以在控制台中看到一個元素數組），但是每當我想在頁面上顯示它時得到這個錯誤：

TypeError：無法讀取未定義的屬性“ map”。

我正在使用axios進行連接，因此這是我的代碼：

import React from 'react';
import axios from 'axios';

class Player extends React.Component {
    state = {
      loading: true,
      error: "",
      data: []
  };  

  loadData = () => {
    this.setState({ loading: true });
    return axios
      .get('http://localhost:6444/api/example')
      .then(result => {
        console.log(result);
        this.setState({
          data: result.data.items,
          loading: false,
          error: false
        });
      })
      .catch(error => {
        console.error("error: ", error);
        this.setState({
          error: `${error}`,
          loading: false
        });
      });
  };

  componentDidMount() {
      this.loadData();
    }

    render() {
      const { loading, error, data } = this.state;
      if (loading) {
        return <p>Loading ...</p>;
      }
      if (error) {
        return (
          <p>
            There was an error loading the players.{" "}
            <button onClick={this.loadData}>Try again</button>
          </p>
        );
      }
      return (
        <div>
          <h1>Players</h1>
          <p>{data.map((player, index) => {
            return (
              <div key={index} player={player}></div>
            )})}</p>
        </div>
      );
    }   
}

export default Player;

我希望任何人都可以幫助我解決問題，到目前為止，我已經嘗試了很多方法，但沒有任何方法可以解決問題。

Answer 1

根據包括result輸出在內的注釋，應將狀態更新更改為：

this.setState({
  data: result.data,
  loading: false,
  error: false
});

您的數據項必須直接在數據上，而不在data.items的鍵下。

Answer 2

results.data中沒有items屬性。 這應該足夠了。

this.setState({
  data: result.data,
  loading: false,
  error: false
});

更改div的渲染以將內容放入div

<p>{data.map((player, index) => {
  return (
    <div key={index}>{player}</div>
)})}</p>