如何解决单元测试警告以拥有唯一的 key 属性

Question

function OperatingHoursList(props: OperatingHoursProps): JSX.Element {
 const provOperatingHoursList: JSX.Element[] = [];
if (props.operatingHours) {
props.operatingHours.forEach(
  ({ open, close }: { open: string; close: string }) => {
    const openTime = open;
    const closeTime = close;
    if (typeof openTime === "string" && typeof closeTime === "string") {
      provOperatingHoursList.push(
        <div css={popupTimeText}>{`${timeFormatConversion(
          openTime
        )} - ${timeFormatConversion(closeTime)}`}</div>
      );
    }
  }
);
} else {
  provOperatingHoursList.push(<div css={popupTimeText}>Closed</div>);
}

 return <div css={popupBottomTextTimeSection}>{provOperatingHoursList}</div>;
}

我有一个函数，将数据推送到一个数组中，我面临以下错误

Answer 1

一个简单的方法是使用元素的索引作为键

if (props.operatingHours) {
props.operatingHours.forEach(
  ({ open, close }: { open: string; close: string }, index) => {
    const openTime = open;
    const closeTime = close;
    if (typeof openTime === "string" && typeof closeTime === "string") {
      provOperatingHoursList.push(
        <div key={index} css={popupTimeText}>{`${timeFormatConversion(
          openTime
        )} - ${timeFormatConversion(closeTime)}`}</div>
      );
    }
  }
);
} else {
  provOperatingHoursList.push(<div css={popupTimeText}>Closed</div>);
}