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>

TypeError：无法读取未定义React.js的属性“ map”

2 个答案: