here is I facing problem image
export const FlipData = [
{
id: "1",
tittle: "IT Manpower Consultant",
points: [
"Devops and IT consulting",
"Renting Servers",
"Cloud host and services",
"Virtualizations ",
"Security Solutions",
],
detail:
"We offer IT staffing solutions in multiple capabilities. We recruit for positions such as Devops Consulting, Systems Analyst, System Administrator, Technician, Help Desk Analyst, Security Specialist and more.",
icon: icon,
},
{
id: "2",
tittle: "IT Managed Service's",
points: [
"Devops and IT consulting",
"Renting Servers",
"Cloud host and services",
"Virtualizations ",`your text`
"Security Solutions",
],
detail:
"We provide a systematic and professional approach to the management of IT service and enhances customer satisfaction through a more professional approach to service delivery.",
icon: icon1,
},
这是我的JSON文件,我将在这里解构数组数据,当我解构“points”对象<p>{current.points[0]}</p>
或{points[0]}
时,我遇到了一个问题,我得到了一个名为错误的标题。详图构件
import React from "react";
import FlipData from "./FlipBoxData";
import { Link } from "react-router-dom";
const FlipBox = () => {
console.log(FlipData);
return (
<>
<div className="flip-box">
<div className="flip-box-heading">
<h3>OUR iT SERVICES AND SOLUTIONS</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
</p>
</div>
<div className="container1">
<div className="flip-box-main-grid">
<div className="flip-box-grid">
{/* start */}
{FlipData.map((current, id) => {
const { tittle, detail, icon, points } = current;
return (
<>
<div className="flip-box-grid-1" key={id}>
<div className="flip-main-card">
<div className="flip-front">
<img src={icon} alt="" />
<h4>{tittle}</h4>
<p>{detail}</p>
<Link to="\">Read More</Link>
</div>
<div className="flip-back">
<div className="flip-card-scroll">
# <p>{points[0]}</p>
</div>
</div>
</div>
</div>
</>
);
})}
{/* end */}
</div>
</div>
</div>
</div>
</>
);
};
export default FlipBox;
如何解构数组对象数组['points']
?
2条答案
按热度按时间oogrdqng1#
执行
import FlipData from "./FlipBoxData";
时,您要求默认导出"./FlipBoxData". However, you have no specified a default export, so
FlipDatawill always be
undefined. Instead, you have a named export called
FlipData:
export const FlipData`。您可以引用名称(首选),或添加默认导出:首选选项
备选方案
sirbozc52#
我认为,你的渲染组件没有问题。我尝试使用你的示例JSON数据并在Playcode上渲染它,它通常被渲染。你调用
points[0]
,如果你的JSON返回的数据是points: []
,这意味着这个点没有数据,而你想得到index 0
,这可能是错误的。或者您可以使用可选的rendered with
<p>{current.points.length ? current.points[0] : '-'}</p>