下面是一个页面在nextjs：

import type { NextPage } from "next";
import DatePicker from "react-datepicker";
import { useState as useStateHook } from "@hookstate/core";
import { useState as useStateReact } from "react";

const PageDate: NextPage = () => {
  const [reactDate, setReactDate] = useStateReact(new Date());
  const hookDate = useStateHook(new Date());
  const showDate = useStateHook(false);

  return (
    <>
      <div>
        <div>ReactDate</div>
        <DatePicker
          selected={reactDate}
          onChange={(date) => setReactDate(date as Date)}
        />
      </div>
      <div>
        <div>HookDate</div>
        <DatePicker
          selected={hookDate.value}
          onChange={(date) => hookDate.set(date as Date)}
        />
      </div>
      <div>
        <div onClick={() => showDate.set(true)}>HookDate (rendered front)</div>
        {showDate.value && (
          <DatePicker
            selected={hookDate.value}
            onChange={(date) => hookDate.set(date as Date)}
          />
        )}
      </div>
    </>
  );
};

export default PageDate;

如果您按此方式运行，则会出现以下错误：

TypeError: this is not a Date object.

如果您对第二个DatePicker添加注解，它会很好地呈现。一旦您单击div来呈现第三个DatePicker，您将收到错误：

TypeError: Date.prototype.getTime called on incompatible Proxy

使用以下代码段：

.next\static\chunks\pages\form2.js (39:0) @ toDate

  37 | if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
  38 |   // Prevent the date to lose the milliseconds when passed to new Date() in IE10
> 39 |   return new Date(argument.getTime());
  40 | } else if (typeof argument === 'number' || argStr === '[object Number]') {
  41 |   return new Date(argument);
  42 | } else {

如果将第三个变量改为使用new Date(hookDate.value)而不是hookDate.value，则会出现以下错误：

TypeError: _this.child(...).get is not a function

下面是代码片段：

.next\static\chunks\pages\_app.js (823:0) @ ./node_modules/@hookstate/core/dist/index.es.js/StateMethodsImpl.prototype.valueObjectImpl/StateMethodsImpl<

  821 |         return target[key];
  822 |     }
> 823 |     return _this.child(key).get();
  824 | }, function (target, key, value) {
  825 |     if (typeof key === 'symbol') {
  826 |         // allow clients to associate hidden cache with state values

使用console.log表明hookDate.value确实是Date
package.json文件中的版本：

"@hookstate/core": "^3.0.13",
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-datepicker": "^4.5.0",

然后我意识到有一个较新版本的next，所以我升级到"^12.0.7"，错误是相同的，最后一个的代码段现在显示如下：

pages\form2.tsx (31:22) @ PageDate

  29 | {showDate.value && (
  30 |   <DatePicker
> 31 |     selected={new Date(hookDate.value)}
     |              ^
  32 |     onChange={(date) => hookDate.set(date as Date)}
  33 |   />
  34 | )}