未捕获的类型错误：无法读取未定义的属性（读取“地图”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'map')未捕获的类型错误：无法读取未定义的属性（读取“地图”）
【发布时间】：2021-12-26 10:47:55
【问题描述】：

我收到了这个错误

Mainsection.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

这是我的 mainsection.js 文件，我正在使用 API 密钥来迭代数据，我仍然没有得到错误的原因。首先，我创建了一个名称为 info 的数组并将所有数据存储在其中，然后对其进行迭代，现在使用 fetchapi 后，我删除了该数组，因为它没有用。不知道是不是要删。

import React, { Component } from 'react'
import Card from './Card'

export default class Mainsection extends Component {

    constructor() {
        super();
        this.state = {
            info:null
        }
    }
async componentDidMount(){
    let Url="https://randomuser.me/api/?inc=gender,name,nat,location,picture,email&results=";
    let data= await fetch(Url);
    let parsedData= await data.json()
    console.log(parsedData);
    this.setState({
         info : parsedData.info
    })

}

    render() {
        return (
            <div>
                <div className="container mt-5">
                    <div className="row">
                        {this.state.info.map((element) => {
                            return <div className="col-md-4">
                                <Card key={element.email} name={element.name} location={element.location} gender={element.gender} imageUrl={element.picture.medium} />
                            </div>
                        })}

                    </div>
                </div>
            </div>
        )
    }
}

这是我的 card.js 文件

import React, { Component } from 'react'

export default class Card extends Component {
    render() {
        let {name, location, gender, imageUrl}=this.props
        return (
            <div>
                 <div className="card" style={{ width: "18rem" }}>
            <img src={imageUrl} className="card-img-top" alt="..." />
            <div className="card-body">
                <h5 className="card-title">{name}</h5>
                <p className="card-text">{location}</p>
                <p className="card-text">{gender}</p>
                <a href="/" className="btn btn-primary">Go somewhere</a>
            </div>
        </div>
            </div>
        )
    }
}

请允许我提供更多详细信息

【问题讨论】：

所以 console.log info: this.info - 它可能不是一个数组

标签： javascript arrays reactjs dictionary

【解决方案1】：

您可以在这里找到一个工作示例：https://codesandbox.io/s/musing-hill-uxtt0

您的代码还有其他问题。例如，名称和位置是对象，您直接尝试在 UI 上显示它。我还添加了代码来修复名称。

Mainsection.js

import React, { Component } from "react";
import Card from "./Card";

export default class Mainsection extends Component {
  constructor() {
    super();
    this.state = {
      info: null,
      results: null
    };
  }
  async componentDidMount() {
    let Url =
      "https://randomuser.me/api/?inc=gender,name,nat,location,picture,email&results=";
    let data = await fetch(Url);
    let parsedData = await data.json();
    console.log(parsedData);
    this.setState({
      info: parsedData.info,
      results: parsedData.results
    });
  }

  render() {
    console.log("results : ", this.state.results);
    return (
      <div>
        <div className="container mt-5">
          <div className="row">
            {this.state?.results?.map((element) => {
              return (
                <div className="col-md-4">
                  <Card
                    key={element.email}
                    name={element.name}
                    location={element.location}
                    gender={element.gender}
                    imageUrl={element.picture.medium}
                  />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

Card.js

import React, { Component } from "react";

export default class Card extends Component {
  render() {
    let { name, location, gender, imageUrl } = this.props;
    return (
      <div>
        <div className="card" style={{ width: "18rem" }}>
          <img src={imageUrl} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{`${name?.title} ${name?.first} ${name?.last}`}</h5>
            <p className="card-text">{JSON.stringify(location)}</p>
            <p className="card-text">{gender}</p>
            <a href="/" className="btn btn-primary">
              Go somewhere
            </a>
          </div>
        </div>
      </div>
    );
  }
}

【讨论】：

它确实有效，但代替名称和其他详细信息，我得到了一个对象，它是 {"street":{"number":3675,"name":"Næstvedvej"},"city" :"Kongens Lyngby","state":"Danmark","country":"Denmark","postcode":26603,"coordinates":{"latitude":"-27.8099","longitude":"77.5455"} ,"timezone":{"offset":"+3:30","description":"德黑兰"}}
是的。名称必须按照您的预期工作，但我留下了位置部分，以便您自己修复它。
是的，我会修复它，感谢您的解决方案

【解决方案2】：

因此，您使用的API 不会以Array 回复。但它以object 响应，object 有 2 个attributes，它们是results 和info。如下所示

{
"results": ...
....
....
"info": ...
}

而results 它本身是一个Array of objects，而info 只是一个对象。

所以是的，你不能在对象上使用 map，它只能在数组上使用。仔细检查回复，以便您决定要做什么。

【讨论】：