如何在视图层渲染中使用对象的更新状态？

Question

我正在做一个项目，我正在更改日期值的状态并想在视图层渲染中使用它。但是，当我尝试将它用作

<h2>{appointmentDate.toLocaleDateString()}</h2>

时，它会抛出错误“无法读取未定义的属性（读取'toLocaleDateString'）”。

此外，如果我只使用“appointmentDate”

<h2>{appointmentDate}</h2>

，它会抛出错误“对象作为 React 子项无效（找到：[object Date]）。如果您打算渲染子项集合，请使用数组代替。“

我想在 h2 标签中使用“appointmentDate”的值（在 useState 中定义，由“handleDate”函数更改）。请提供在函数外使用更新值的解决方案。

代码如下：

import { useRef, useState } from "react";
import { Calendar } from "react-date-range";
import { addDays } from "date-fns";
import { format } from "date-fns";
import "react-date-range/dist/styles.css"; // main css file
import "react-date-range/dist/theme/default.css"; // theme css file

export default function App() {
  const [appointmentDate, setAppointmentDate] = useState(new Date());

  const handleDate = (e) => {
    const clickedDate = e.target.value;
    setAppointmentDate(clickedDate);
    document.getElementById("select-calendar").innerHTML =
      appointmentDate.toLocaleDateString();
    console.log(appointmentDate);
  };
  return (
    <div className="App">
      <span id="select-calendar">Select calendar</span>
      <div onClick={handleDate}>
        <Calendar
          onChange={(item) => setAppointmentDate(item)}
          date={appointmentDate}
          className="stay-date"
          name="appointmentDate"
        />
      </div>
      <h2>{appointmentDate.toLocaleDateString()}</h2>
    </div>
  );
}

这是代码笔链接：https://codesandbox.io/s/happy-maxwell-6x28nx?file=/src/App.js:23-1034

我尝试使用 useRef 但它仍然抛出相同的错误。

PS：这是我在 StackOverflow 上的第一个问题。如果我无法正确解释问题，请多多包涵。

Answer 1

你可以这样做：

export default function App() {
  const [appointmentDate, setAppointmentDate] = useState(new Date());

  const handleDate = (date) => {
    setAppointmentDate(new Date(date));
  };
  return (
    <div className="App">
      <span id="select-calendar">Select calendar</span>
      <div>
        <Calendar
          onChange={handleDate}
          date={appointmentDate}
          className="stay-date"
          name="appointmentDate"
        />
      </div>
      <h2>{appointmentDate.toLocaleDateString()}</h2>
    </div>
  );
}

您没有在日历 onchange 事件上调用 handleDate 函数。同样 onchange 它返回日期，所以你首先需要将它转换为日期对象然后设置状态。