тенге и проблемы, связанные с этим, вопросы, связанные с данными (unas tarjetas), база данных, базы данных, базы данных, данные, набор данных, карта памяти, запись, массив данных для меня ошибка lanza este bundle.js: 22 Ошибка типа: невозможно прочитать свойство ‘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 ={amp}gt; { return res.json(); }) .then(response ={amp}gt; { this.setState({ courseData: response }); }) .catch(err ={amp}gt; { alert("Ocurrio un error al cargar parte de la web"); }); } render() { const coursesDTA = this.state.courseData[0].map(dates ={amp}gt; { console.log(dates); return ( {amp}lt;CardCourseNormal Description={dates.description} Students={dates.students} Quality={dates.quality} Title={dates.title} Image={dates.img} /{amp}gt; ); }); return ( {amp}lt;div{amp}gt; {amp}lt;div class="initial-face container-fluid d-flex justify-content-center align-items-center flex-column "{amp}gt; {amp}lt;h1 class="text-warning text-center"{amp}gt;Aprende y Emprende,{amp}lt;/h1{amp}gt; {amp}lt;h2 class="text-warning text-center"{amp}gt; {amp}lt;b{amp}gt;Sé un rey en tu area{amp}lt;/b{amp}gt; {amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container-fluid container-home-cards m-auto"{amp}gt; {amp}lt;div class="column p-3 col-md-12"{amp}gt; {amp}lt;div class="row d-flex justify-content-center align-items-center"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="home-quest d-flex flex-column justify-content-center align-items-center p-4"{amp}gt; {amp}lt;h1 class="text-warning text-center"{amp}gt; ¿ Estas Listo Para Estar Listo ? {amp}lt;/h1{amp}gt; {amp}lt;footer class="container d-flex flex-column justify-content-center align-items-center p-1 m-auto"{amp}gt; {amp}lt;div class="column col-md-12"{amp}gt; {amp}lt;div class="row d-flex justify-content-center"{amp}gt; {amp}lt;a class="m-1" href="/Terms"{amp}gt; Términos y Condiciones {amp}lt;/a{amp}gt; {amp}lt;a class="m-1" href="/Contact"{amp}gt; Contacto {amp}lt;/a{amp}gt; {amp}lt;a class="m-1" href="/WhoUs"{amp}gt; Quienes Somos {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row d-flex justify-content-center"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/footer{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } } export default Home; 

Асинхронная операция в componentDidMount не завершится немедленно, что означает, что state.courseData будет пустым (его начальное значение) при первом визуализации компонента.

В этой строке:

 const coursesDTA = this.state.courseData[0].map(dates ={amp}gt;{ 

this.state.courseData[0] изначально undefined , поэтому у вас будет ошибка при попытке вызвать .map для undefined .

Чтобы исправить это, самое простое решение — проверить, содержит ли courseData хотя бы одно значение, и действовать соответственно:

 const coursesDTA = this.state.courseData.length === 0 ? [] : this.state.courseData[0].map(dates ={amp}gt;{ console.log(dates); return ( {amp}lt;CardCourseNormal Description={dates.description} Students={dates.students} Quality={dates.quality} Title={dates.title} Image={dates.img}/{amp}gt; ); }); 

Вы можете также рассмотреть возможность показа экрана загрузки, пока данные не закончат загрузку.