Question

Tengo Un问题和Tengo Un Componenete en Reactjs（Uns tarjetas）Qu Quiero Mostrar Con Un contenido enviado de una das de datos，加密获取的seteo el estato con los datos dados y le Hago Un Map Para Recorrer El数组显示错误Estes错误bundle.js：22 TypeError：无法读取未定义的属性'map'

import React, { Component } from "react";
import CardCourseNormal from "../Components/CardCourseNormal.js";

class Home extends Component {
  constructor() {
    super();

    this.state = {
      courseData: []
    };
  }

  componentDidMount() {
    fetch(
      "http://localhost:3000/87f6vsb4bv86sf873478ggggg8784saltdsfb7324865h45635sasa"
    )
      .then(res => {
        return res.json();
      })
      .then(response => {
        this.setState({ courseData: response });
      })
      .catch(err => {
        alert("Ocurrio un error al cargar parte de la web");
      });
  }

  render() {
    const coursesDTA = this.state.courseData[0].map(dates => {
      console.log(dates);

      return (
        <CardCourseNormal
          Description={dates.description}
          Students={dates.students}
          Quality={dates.quality}
          Title={dates.title}
          Image={dates.img}
        />
      );
    });

    return (
      <div>
        <div class="initial-face container-fluid d-flex justify-content-center align-items-center flex-column ">
          <h1 class="text-warning text-center">Aprende y Emprende,</h1>
          <h2 class="text-warning text-center">
            <b>Sé un rey en tu area</b>
          </h2>
        </div>

        <div class="container-fluid container-home-cards m-auto">
          <div class="column p-3 col-md-12">
            <div class="row d-flex justify-content-center align-items-center"></div>
          </div>
        </div>

        <div class="home-quest d-flex flex-column justify-content-center align-items-center p-4">
          <h1 class="text-warning text-center">
            ¿ Estas Listo Para Estar Listo ?
          </h1>

          <footer class="container d-flex flex-column justify-content-center align-items-center p-1 m-auto">
            <div class="column col-md-12">
              <div class="row d-flex justify-content-center">
                <a class="m-1" href="/Terms">
                  Términos y Condiciones
                </a>
                <a class="m-1" href="/Contact">
                  Contacto
                </a>
                <a class="m-1" href="/WhoUs">
                  Quienes Somos
                </a>
              </div>

              <div class="row d-flex justify-content-center"></div>
            </div>
          </footer>
        </div>
      </div>
    );
  }
}

export default Home;

Answer 1

mysqli_select_db($conn, $webdb); $stmt = $conn->prepare("SELECT id,title, content, author FROM news"); $stmt->execute(); $stmt->bind_result($newsid, $title, $content, $author); $stmt->store_result(); if($stmt->num_rows > 0) { while($stmt->fetch()) { echo $title." (<a href='pages/shownews.php?id=".$newsid."' target='_blank'>view</a>)"; } }中的异步操作不会立即完成，这意味着componentDidMount将在第一次呈现组件时为空（其初始值）。

在这一行：

state.courseData

const coursesDTA = this.state.courseData[0].map(dates =>{最初是this.state.courseData[0]，因此尝试在undefined上调用.map会出错。

要解决此问题，最简单的解决方案是检查undefined是否包含至少一个值，并采取相应措施：

courseData

您可能还想考虑改为显示一个加载屏幕，直到数据加载完成。

TypeError：无法读取未定义的属性“ map”？

1 个答案: