如何解决React列表渲染中缺少唯一key属性的单元测试警告

你的OperatingHoursList组件在生成营业时间列表时，没有给每个列表元素添加唯一的key属性，违反了React的列表渲染规则，因此出现警告。以下是具体的修改方案：

修改后的代码 #

function OperatingHoursList(props: OperatingHoursProps): JSX.Element {
  let provOperatingHoursList: JSX.Element[];

  if (props.operatingHours) {
    // 用map遍历生成元素数组，同时添加key
    provOperatingHoursList = props.operatingHours.map(
      ({ open, close }, index) => {
        const openTime = open;
        const closeTime = close;
        if (typeof openTime === "string" && typeof closeTime === "string") {
          // 优先使用数据中的唯一标识（如id）作为key，无唯一标识时用索引
          return (
            <div key={index} css={popupTimeText}>
              {`${timeFormatConversion(openTime)} - ${timeFormatConversion(closeTime)}`}
            </div>
          );
        }
        return null;
      }
    ).filter(Boolean); // 过滤无效的空元素
  } else {
    // 给Closed元素添加固定key
    provOperatingHoursList = [<div key="closed" css={popupTimeText}>Closed</div>];
  }

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

关键修改点说明 #

• 替换遍历方式：用map替代forEach+数组push的写法，更符合React组件的编码习惯，同时能直接获取循环索引（或数据唯一标识）作为key。
• 添加唯一key：
  • 营业时间项：如果operatingHours数组的每一项有自身的唯一标识（比如id字段），请把key={index}改成key={item.id}，这是最优方案，能避免数组顺序变化时React出现渲染错误。
  • “Closed”元素：用固定字符串key="closed"作为唯一标识，因为这是单一元素，不会重复。
• 过滤无效元素：添加filter(Boolean)过滤掉不符合条件时返回的null，避免数组中出现空元素影响渲染。

React要求列表元素必须有唯一key，目的是让React能精准识别每个元素的变化，提升列表渲染的性能和准确性。

内容的提问来源于stack exchange，提问作者Siva Sai