如何获取数组中的startTime值？{props.StartTime}无法生效

从你提供的截图可以看到，传入contentTemplate的props是一个数组，而非单个对象。直接使用props.StartTime无法获取值，因为数组本身没有StartTime这个属性，你需要先访问数组中的元素，再获取对应字段。

根据你的场景，有两种常见处理方式：

方式1：确保传入单个对象（推荐） #

如果contentTemplate是用来渲染单个条目，那么在调用这个组件时，应该传入数组里的单个元素，而非整个数组。比如你有一个数据源数组events，可以用map循环渲染：

// 假设这是你的数据源
const events = [
  { StartTime: "Thu Dec 22 2022 21:20:00 GMT+0800 (Malaysia Time)", Location: "...", DoctorList: "..." },
  // 其他条目
];

// 调用组件时传入单个元素
events.map(event => <ContentTemplate {...event} />)

这样你的原代码{props.StartTime}就能正常工作了。

方式2：直接处理数组类型的props #

如果contentTemplate确实需要接收整个数组作为props，你可以通过数组索引访问元素，或者循环渲染所有条目的StartTime：

• 取数组第一个元素的StartTime：

<div class="e-date-time-details e-text-ellipsis">
  {props[0]?.StartTime}
</div>

使用?.可选链操作符可以避免数组为空时报错。

• 循环渲染所有条目的StartTime：

<div class="e-date-time-wrapper e-text-ellipsis">
  {props.map((item, idx) => (
    <div key={idx} class="e-date-time-details e-text-ellipsis">
      {item.StartTime}
    </div>
  ))}
</div>

验证数据类型 #

你也可以在代码里先打印props的类型，确认数据结构：

const contentTemplate = props => {
  console.log("props类型:", typeof props, "props内容:", props); // 查看控制台输出
  return (
    // 原组件内容
  );
};

这样能更清晰地确认你需要处理的数据结构。

内容的提问来源于stack exchange，提问作者Fatt Sky