TypeError : date.locale n'est pas une fonction

Question

J'utilise antd "antd": "^5.5.1" DatePicker 来绑定日期字符串，这是 App.tsx Le code est le suivant :

import { DatePicker, Form } from "antd";
import React from "react";
import { useState } from "react";

export interface EduModel {
  admission: String;
}

const App: React.FC = () => {

  const [edu, setEdu] = useState<EduModel>();

  const onFinish = (values: any) => {

  };

  React.useEffect(() => {
    let edu1: EduModel = {
      admission: '1995-09-01'
    };
    setEdu(edu1);
  }, []);

  const onFinishFailed = (errorInfo: any) => {

  };

  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue(edu)
  }, [form, edu]);

  return (
    <div>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        form={form}
      >
        <Form.Item
          label={"admission"}
          name="admission"
          rules={[
            { required: true, message: "please input date" }
          ]}>
          <DatePicker format={"YYYY-MM-DD"}></DatePicker>
        </Form.Item>
      </Form>
    </div>
  );
}

export default App;

Lorsque j'exécute cette page simple, l'erreur s'affiche : 

dayjs.js:185 Uncaught TypeError: date.locale is not a function
    at Object.format (dayjs.js:185:1)
    at formatValue (dateUtil.js:104:1)
    at useValueTexts.js:18:1
    at useMemo (useMemo.js:5:1)
    at useValueTexts (useValueTexts.js:8:1)
    at InnerPicker (Picker.js:150:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at beginWork (react-dom.development.js:27426:1)

J'ai essayé d'ajouter le format de chaîne DatePicker mais je ne parviens toujours pas à résoudre le problème. Ai-je manqué quelque chose? Que dois-je faire pour que cela fonctionne ?

Answer 1

erreur date.locale et datepicker

Je pense qu'Ant Datepicker dans la version 5 accepte le type ou la chaîne dayjs et ne peut pas accepter undéfini. Initialement, les valeurs de votre formulaire ne sont pas définies. Mettez à jour sa chaîne plus tard.

Peux-tu l'essayer ?

Exemple

Lorsque vous définissez la valeur initiale :

form.setFieldsValue({
 admission: dayjs(edu?.admission)
});

Lorsque vous soumettez une valeur :

const onFinish = (values: any) => {
 console.log({
  ...values,
  admission: dayjs(values?.admission).format("YYYY-MM-DD")
 });
};

J'espère que cela vous aidera.

import { DatePicker, Form, Button } from "antd";
import React from "react";
import { useState } from "react";
import dayjs, { Dayjs } from "dayjs";

export interface EduModel {
  admission: String;
}

const App: React.FC = () => {
  const [edu, setEdu] = useState<EduModel>();

  const onFinish = (values: any) => {
    console.log({
      ...values,
      admission: dayjs(values?.admission).format("YYYY-MM-DD")
    });
  };

  React.useEffect(() => {
    let edu1: EduModel = {
      admission: dayjs("1995-09-01").format("YYYY-MM-DD")
    };
    setEdu(edu1);
  }, []);

  const onFinishFailed = (errorInfo: any) => {};

  const [form] = Form.useForm();

  React.useEffect(() => {
    if (edu) {
      form.setFieldsValue({
        admission: dayjs(edu?.admission)
      });
    }
  }, [form, edu]);

  return (
    <div>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        form={form}
      >
        <Form.Item
          label={"admission"}
          name="admission"
          rules={[{ required: true, message: "please input date" }]}
        >
          <DatePicker format={"YYYY-MM-DD"}></DatePicker>
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;