為什么我在控制台中記錄 JSX 中的映射數組時會收到此代碼

Question

我已經嘗試解決這個問題近 4 個小時，任何幫助將不勝感激，我之前記錄了對象數組，它工作完美，對象都在正常工作，現在它正在崩潰，我也會很快。

    0: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    1: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    2: {$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: {…}, …}
    length: 3
    [[Prototype]]: Array(0)

源代碼

     import React from "react";
     import placeholder from "./placeholder.png";

     function Card(props) {
       const updatedData = props.data;
       console.log(typeof updatedData);
       const newEntry = updatedData.map(function (item) {
         return (
           <div>
             <div className="main-container">
               <div className="main-image">
                 <img src={item.imageUrl} alt="" />
               </div>
               <div className="main-info">
                 <div className="location-container">
                   <img className="placeholder-logo" src={placeholder} alt="" />
                   <p className="location">{item.location}</p>
                   <a href={item.googleMapsUrl}>View on Google Maps</a>
                 </div>
                 <h1>{item.title}</h1>
                 <h4 className="dates">
                   {item.startDate}-{item.endDate}
                      </h4>
                     <p className="description">{item.description}</p>
                   </div>
                </div>
               </div>
             );
            });
          console.log(newEntry);
        }

   export default Card;

Answer 1

您缺少組件的退貨。

import React from "react";
import placeholder from "./placeholder.png";

function Card(props) {
  const updatedData = props.data;
  console.log(typeof updatedData);
  return updatedData.map(function (item) {
    return (
      <div>
        <div className="main-container">
          <div className="main-image">
            <img src={item.imageUrl} alt="" />
          </div>
          <div className="main-info">
            <div className="location-container">
              <img className="placeholder-logo" src={placeholder} alt="" />
              <p className="location">{item.location}</p>
              <a href={item.googleMapsUrl}>View on Google Maps</a>
            </div>
            <h1>{item.title}</h1>
            <h4 className="dates">
              {item.startDate}-{item.endDate}
            </h4>
            <p className="description">{item.description}</p>
          </div>
        </div>
      </div>
    );
  });
}