Question

未捕获的类型错误：无法读取未定义的属性（读取‘map’）

2021-12-26

4218

javascript arrays reactjs dictionary

我收到此错误

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>
        )
    }
}

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

Answer 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>
    );
  }
}

Answer 2

因此，您使用的 API 不会以 Array 进行响应。但它会以 object 进行响应，该 object 具有 2 个 attributes ，分别是 results 和 info 。如下所示

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

并且 results 本身是一个 对象数组 ，而 info 只是一个对象。

因此，是的，您不能在对象上使用 map，它只能在数组上使用。仔细检查响应，以便您可以决定要做什么。