未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“地圖”）

我收到此錯誤

Mainsection.js:27 未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“地圖”）

這是我的 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>
        )
    }
}

請讓我提供更多詳細資訊

uj5u.com熱心網友回復：

你可以在這里找到一個作業示例：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>
    );
  }
}

卡.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>
    );
  }
}

uj5u.com熱心網友回復：

因此，API您正在使用的不會以Array. 但它以 回應object，其中object有 2 個attributes是results和info。正如你在下面看到的

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

并且results它的自我是一個Array of objects，而info只是一個物件。

所以是的，你不能在物件上使用 map，它只能在陣列上使用。仔細檢查回復，以便您決定要做什么。

標籤：javascript 数组 反应 字典

上一篇：在Powershell中，如何設定$？不將此值發送到管道？

下一篇：自定義“forjsonauto”以獲得自定義結果