TypeError：无法读取未定义 React.js 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined React.jsTypeError：无法读取未定义 React.js 的属性“地图”
【发布时间】：2019-12-20 18:40:28
【问题描述】：

我正在尝试从我的 Web API 解析数据并将其显示在我的反应页面上，连接成功并且数据已被解析（我可以在控制台中看到一个元素数组）但是每当我想显示它时我收到此错误的页面：

TypeError: 无法读取未定义的属性“地图”。

我正在使用 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;

我希望任何人都可以帮助我解决问题，我现在尝试了很多东西，但没有解决问题。

【问题讨论】：

result.data.items 未在您的回复中返回。你可能想试试result.data.items || [] 或者如果它是空的就添加一个错误。
当你console.log(result)console.log(result)时，你还能添加你在控制台日志中看到的内容吗？
你能发布console.log(result);的输出吗？
{data: Array(16), status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {url: "localhost:6444/api/example" ，方法：“get”，标头：{...}，transformRequest：Array(1)，transformResponse：Array(1)，...} 数据：Array(16) {...} 长度：16 proto: Array(0) headers: {content-length: "798", content-type: "application/json; charset=utf-8"} request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials ：false，上传：XMLHttpRequestUpload，...} 状态：200 statusText：“OK”proto：Object
result.data.items 也是非空数组吗？

标签： javascript reactjs api axios

【解决方案1】：

根据您的评论（包括result 的输出），您应该将状态更新更改为：

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

您的数据项必须直接在数据上，而不是在 data.items 的键下。

【讨论】：

【解决方案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>

【讨论】：

我尝试更改它，现在我不再收到错误但数据不显示
因为玩家的 div 里面没有任何东西。
@MukeshSoni 他正在检索 items 不是所有数据！
是的。我的回答解决了这两个问题。第一个代码删除了对result.data.items的访问。