英文:
Mantine date picker throws an objects are not valid as a react child error
问题
我正在尝试在NextJS中使用mantine Date。当用户点击日期时，该日期应该显示在HTML文本标题中。例如，如果用户选择了2023年1月1日这个日期，文本应该显示为Date: Sun Jan 01 2023...。我正在使用console.log进行测试，它能够正常工作。但是，当我尝试在文本标题中使用它时，会抛出以下错误：Error: 对象无法用作React子元素（找到：[object Date]）。如果您想要渲染一组子元素，请改用数组。
我尝试过对它进行映射，但没有成功。然后我尝试使用const date = [...calendarVal]，但它显示TypeError：calendarVal不可迭代。
以下是您提供的代码部分，我已经将其翻译好：
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);const [calendarVal, setCalendarVal] = useState(new Date());const [hydrated, setHydrated] = React.useState(false);React.useEffect(() => {setHydrated(true);}, []);useEffect(() => {console.log(calendarVal);});if (!hydrated) {// 在第一次渲染时返回null，以便客户端和服务器匹配return null;}return (<><Modalopened={opened}onClose={() => setOpened(false)}title="Introduce yourself!">{/* 模态框内容 */}</Modal><Group position="center"><Button onClick={() => setOpened(true)}>Open Modal</Button></Group><p>Date: {calendarVal}</p><Group position='center'><Calendar onChange={setCalendarVal} value={calendarVal} /></Group></>);}
请注意，我已将useState的初始值更改为new Date()，以确保它是一个Date对象。如果您需要进一步的帮助或有其他问题，请随时提问。
英文:
I'm trying to use mantine Date in NextJS. When a user clicks on the date, that date suppose to display the date in the html text heading. For example, if a user picks the date jan 1st 2023, the text is supposed to look like Date: Sun Jan 01 2023... I'm testing it out using a console.log and it works. However, when I try to use it in the text heading this error gets thrown: Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.
I tried adding a map to it that didn't work. Then I tried using const date = [...calendarVal] but it said TypeError: calendarVal is not iterable
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);const [calendarVal, setCalendarVal] = useState(Date());const [hydrated, setHydrated] = React.useState(false);React.useEffect(() => {setHydrated(true);}, []);useEffect(() => {console.log(calendarVal)})if (!hydrated) {// Returns null on first render, so the client and server matchreturn null;}return (<><Modalopened={opened}onClose={() => setOpened(false)}title="Introduce yourself!">{/* Modal content */}</Modal><Group position="center"><Button onClick={() => setOpened(true)}>Open Modal</Button></Group><p>Date: {calendarVal}</p><Group position='center'><Calendar onChange={setCalendarVal} value={calendarVal} /></Group></>);}
答案1
得分: 1
你不能直接在React中渲染对象，首先需要将它们转换为字符串（通常）。例如，你可以编写以下代码：
<p>日期：{calendarVal.toLocaleString()}</p>
英文:
You can't render objects directly in React, you first need to convert them to strings (typically). For instance you can write the following:
<p>Date: {calendarVal.toLocaleString()}</p>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论