React中使用map取数组首元素触发array-callback-return警告如何解决

你对警告原因的判断是正确的：ESLint的array-callback-return规则要求Array.prototype.map()的回调函数在所有逻辑分支下都要有明确返回值，你仅在index===0的分支内写了返回逻辑，其他分支无返回值，因此触发警告。

另外你的现有代码属于巧合可运行，逻辑本身不合理：map会返回长度和原数组一致的新数组，你当前写法返回的数组结构为[Date对象, undefined]，直接传入new Date()时，JS会自动将数组隐式转换为字符串，刚好能被日期构造函数识别，不属于正确实现。

你需要的是取数组第一个元素的字段，完全不需要使用map，直接按索引取值即可，逻辑更简洁也不会触发警告：

// 可选链兜底判断，没有对应值时返回null，可根据需求调整兜底逻辑
const newDate = data?.summary?.[0] ? new Date(data.summary[0].start) : null;

// 如果需要默认日期作为兜底，可以写为
// const newDate = new Date(data?.summary?.[0]?.start || Date.now());

如果因为业务逻辑限制必须使用map实现，需要给所有分支补充返回值，同时记得手动取出数组第一个元素再传入日期构造函数：

const newDate = new Date(data?.summary.map((d: any, index: number) => {
  if (index === 0) {
    return new Date(d.start);
  }
  // 其他分支补充返回值，解决ESLint警告
  return null;
// 手动取第一个有效元素
})[0]);

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