使用Mantine Date Picker在NextJS中渲染日期触发React子元素错误

问题原因 #

你遇到的错误是因为React无法直接渲染Date对象，仅支持渲染字符串、数字、React元素等可直接解析的类型。初始化时Date()返回的是字符串，但Mantine的Calendar组件onChange回调返回的是Date对象，状态更新后直接在JSX中渲染该对象就会触发报错。

你之前的尝试无效的原因：

• map是数组遍历方法，Date不是数组，无法使用
• [...calendarVal]要求对象为可迭代类型，Date不支持迭代，因此抛出TypeError

解决方案 #

需要将Date对象转换为字符串格式后再渲染，同时保持状态类型一致性：

1. 初始化状态为Date对象：Calendar组件的value属性要求接收Date类型，因此初始化时用new Date()代替Date()，保证类型统一
2. 渲染时转换为目标字符串格式：利用Date对象内置方法（如toString()、toLocaleString()）或自定义逻辑转换为字符串

修改后的代码 #

import { useState, useEffect } from 'react';
import { Modal, Button, Group } from '@mantine/core';
import { Calendar, RangeCalendar } from '@mantine/dates';
import React from 'react';

export default function Demo() {
  const [opened, setOpened] = useState(false);
  // 初始化状态为Date对象，与Calendar组件的value类型匹配
  const [calendarVal, setCalendarVal] = useState(new Date());
  const [hydrated, setHydrated] = React.useState(false);

  React.useEffect(() => {
    setHydrated(true);
  }, []);

  useEffect(() => {
    console.log(calendarVal);
  }, [calendarVal]); // 添加依赖项，避免无意义重复执行

  if (!hydrated) {
    return null;
  }
  
  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="Introduce yourself!"
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
      
      {/* 将Date对象转为字符串渲染，toString()可得到你需要的格式 */}
      <p>Date: {calendarVal.toString()}</p>
      <Group position='center'>
        <Calendar onChange={setCalendarVal} value={calendarVal} />
      </Group>
    </>
  );
}

自定义日期格式（可选） #

如果需要更个性化的格式（如YYYY-MM-DD），可以手动拼接日期各部分：

const formattedDate = `${calendarVal.getFullYear()}-${String(calendarVal.getMonth() + 1).padStart(2, '0')}-${String(calendarVal.getDate()).padStart(2, '0')}`;
// 渲染时使用：<p>Date: {formattedDate}</p>

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