如何基于API响应高亮React日期选择器中的日期

核心问题分析 #

你遇到的错误主要来自两个点：

• alldata初始值为null，直接调用map会触发类型错误
• Unix时间戳（多为秒级）需要转换为JavaScript的Date实例（毫秒级）才能被DatePicker识别

修正后的代码实现 #

先调整alldata的初始状态，再处理时间戳到Date的转换：

// 初始值设为空数组，避免null状态下的map报错
const [alldata, setData] = useState([]); 

useEffect(() => {
  // 注意原代码URL多了一个}，需删除
  fetch(`/getdates`)
    .then((response) => response.json())
    .then((actualData) => setData(actualData));
}, []);

<DatePicker 
  dateFormat="dd/MM/yyyy h:mm aa"
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  // 转换时间戳为Date实例，直接传入数组
  highlightDates={alldata.map(timestamp => new Date(timestamp * 1000))} 
/>

关键细节说明 #

• 初始值优化：将useState初始值从null改为[]，API未返回数据时map不会报错，空数组也符合highlightDates的参数要求
• 时间戳转换：若API返回的是秒级Unix时间戳，必须乘以1000转为毫秒级；如果本身是毫秒级时间戳，直接使用new Date(timestamp)即可
• URL修正：原fetch请求的URL多了一个多余的}，需删除否则会请求错误地址

可选容错处理 #

如果担心API返回数据格式异常，可增加过滤逻辑确保只处理有效数字：

highlightDates={alldata
  .filter(timestamp => typeof timestamp === 'number' && !isNaN(timestamp))
  .map(timestamp => new Date(timestamp * 1000))
}

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