React中解构points数组时遇TypeError问题求助

在React组件中遍历FlipData数组，解构后访问points[0]时出现错误：TypeError: Cannot read properties of undefined (reading '0')。

相关代码 #

FlipData数据定义 #

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,
  },
];

React组件代码 #

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;

错误原因 #

1. FlipData语法错误：第二个对象的points数组中混入了无效代码`your text`，导致JavaScript解析失败，该对象的points属性无法正常初始化，最终变为undefined。
2. 缺少空值校验：即使数据正常，直接访问points[0]未考虑points可能为undefined或空数组的情况，存在潜在风险。

解决方案 #

1. 修正FlipData的语法错误 #

删除第二个对象points数组中的`your text`，确保数组结构合法：

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 ",
      "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,
  },
];

2. 添加空值保护（推荐） #

在组件中访问points[0]前增加校验，避免数据异常时出错：

// 可选写法1：使用可选链操作符
<p>{points?.[0] || '暂无内容'}</p>

// 可选写法2：更严谨的数组校验
<p>{Array.isArray(points) && points.length > 0 ? points[0] : '暂无内容'}</p>

3. 优化组件的key属性 #

替换map的索引key为数据自身的id，符合React的key使用规范：

{FlipData.map((current) => {
  const { id, tittle, detail, icon, points } = current;
  return (
    <div className="flip-box-grid-1" key={id}>
      {/* 其余组件内容保持不变 */}
    </div>
  );
})}

（注：移除了多余的空片段<>，单个元素无需额外包裹）

内容的提问来源于stack exchange，提问作者Mallikarjun Mathapati