React获取日期数据控制台有输出但日历组件不显示问题

你的代码存在3个核心问题，直接导致选中日期无法正常展示： #

1. 异步请求逻辑错误，状态更新不触发重渲染 #

getAllFilledJournauxDates中没有等待接口返回就提前抛出了空数组引用，后续在.then回调中直接往已返回的数组里push内容：

• React对数组、对象类型的状态做浅比较，数组引用地址没有变化时，会判定状态未更新，不会触发组件重渲染
• 控制台能看到rec有数据是浏览器控制台的懒解析机制导致的：打印数组时不会立刻序列化内容，你手动展开打印结果时才会读取当前内存中的数组值，不代表setDates执行时拿到了有效数据

2. 原生Date月份计算错误 #

JS原生Date对象的getMonth()返回值范围是0~11（0代表1月，11代表12月），直接拼接会导致生成的日期比真实日期早1个月，和日历上的日期无法匹配。

3. 日期值格式不符合组件要求 #

手动拼接的未补零的年-月-日字符串不属于组件默认识别的日期格式，无法被解析为有效选中值，推荐直接传入原生Date对象，避免手动拼接带来的格式问题。 #

修复后代码 #

修复接口请求方法 #

export async function getAllFilledJournauxDates() {
  // 等待接口返回后再处理数据
  const response = await getAllJournaux();
  // 通过map返回全新数组，直接生成Date对象，不做手动字符串拼接
  return Object.keys(response).map(key => new Date(response[key].date));
}

调整组件逻辑 #

import React, { useEffect, useState} from 'react';
import { Calendar } from "react-multi-date-picker";
import { getAllFilledJournauxDates } from '../../services/JournauxService';

export default function Test() {
  const [dates, setDates] = useState([]);

  useEffect(() => {
    const fetchDates = async () => {
      const dateList = await getAllFilledJournauxDates();
      setDates(dateList);
    }
    fetchDates();
  }, [])

  return(
    <div>
      <Calendar 
        fullYear
        multiple
        value={dates}
      />
    </div>
  );
}

如果接口返回的日期字符串存在时区偏移问题，可以在生成Date对象时手动补全时区偏移量，或者使用react-multi-date-picker自带的DateObject类做日期格式化。

内容的提问来源于stack exchange，提问作者AWEMA Agence Web Marketing