React js 显示不同的日期，然后从 api 传递

Question

我正在传递一个来自 api 的普通日期作为字符串，类似于2022-04-24 ，但在前面的反应中，它将日期解析为本地时区，我不想将其解析为本地时区。 我的反应代码如下：

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export function App() {
  const schema = Yup.object({});

  const {
    register,
    handleSubmit,
    formState: { errors },
    control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = async (input) => {
    console.log("input", input);
  };

  const item = {
    id: 12,
    release_date: "2022-04-24"
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="release_date"
        defaultValue={item.release_date ? new Date(item.release_date) : null}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            className="form-control w-full"
            dateFormat="MMM dd, yyyy"
            selected={value}
          />
        )}
      />

      <input type="submit" />
    </form>
  );
}

这是屏幕截图，

目前，它显示apr 23 ，即使我已经通过了04-24 。 要查看此问题，您可能必须使用一些不同的时区（当前日期仍为apr 23 ）。

而且，这里是沙盒

Answer 1

使用-和/时会有不同

 const date1 = new Date("2022/04/24"); const date2 = new Date("2022-04-24"); document.getElementById("app").innerHTML = ` <h4>${date1}</h4> <h4>${date2}</h4> `;

 <div id="app"> </div>

https://codesandbox.io/s/date-object-qqjnrs

Answer 2

Luxon 实施：（来自构建时刻的同一个人）

https://moment.github.io/luxon/#/?id=luxon

// leave it as a string
const date1 = "2022-04-24"; 
const date2 = "2022/04/24";

const date1Result = luxon.DateTime.fromFormat(date1, "yyyy-M-dd").toJSDate()
const date2Result = luxon.DateTime.fromFormat(date, "yyyy/M/dd").toJSDate()
console.log({date1Result, date2Result})

（注意，在 js 时刻，解决方案将是相似的。）

您可以通过访问 luxon 网站并在开发工具控制台中编写这些行来亲自查看。

https://moment.github.io/luxon/#/?id=luxon