为什么当我在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>
);
});
}