表单未提交Material UI DateTimePicker的默认值

Question

我使用React作为前端，使用RubyonRails作为后端。我正试图通过表单提交materialUI DateTimePicker的值，但只有当我更改默认DateTimePickers的值时，它才起作用，但当我只提交具有默认值(即当前DateTime(的表单时，它不起作用。当我提交表单时，我尝试显示formData，它显示该值确实存在，但没有插入后端。

这是我在前端中的DateTimePicker

<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(params) => (
<TextField
id="deadline_input"
type="date"
name="task[deadline]"
value={deadline}
className={classes.dateTimePicker}
{...params}
/>
)}
value={deadline}
onChange={(newDate: Date | null) => {
newDate && dispatch(setDeadline(newDate));
}}
/>
</LocalizationProvider>

这是我在控制台记录表单数据时得到的，我可以在这里看到我的截止日期值

(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ['task[title]', 'dfad']
1: (2) ['task[description]', 'fdfdsf']
2: (2) ['task[deadline]', '12/14/2021 12:43 am']
3: (2) ['task[tag]', 'dfad']
length: 4
[[Prototype]]: Array(0)

这就是后端服务器上发生的情况

Processing by Api::V1::TasksController#create as */*
Parameters: {"task"=>{"title"=>"dfad", "description"=>"fdfdsf", "deadline"=>"12/14/2021 12:43 am", "tag"=>"dfad"}}
TRANSACTION (0.5ms)  BEGIN
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
Task Create (1.8ms)  INSERT INTO "tasks" ("title", "description", "tag", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["title", "dfad"], ["description", "fdfdsf"], ["tag", "dfad"], ["created_at", "2021-12-13 16:43:21.917824"], ["updated_at", "2021-12-13 16:43:21.917824"]]
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
TRANSACTION (17.4ms)  COMMIT
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
Completed 201 Created in 37ms (Views: 1.3ms | ActiveRecord: 19.7ms | Allocations: 2182)

当我更改工作于的DatePicker的值时，我还附加了输出

(4) [Array(2), Array(2), Array(2), Array(2)]
0: (2) ['task[title]', 'adfaf']
1: (2) ['task[description]', 'dsfdsf']
2: (2) ['task[deadline]', '12/01/2021 04:08 am']
3: (2) ['task[tag]', 'test']
length: 4
[[Prototype]]: Array(0)

Started POST "/api/v1/tasks" for ::1 at 2021-12-14 00:46:23 +0800
Processing by Api::V1::TasksController#create as */*
Parameters: {"task"=>{"title"=>"adfaf", "description"=>"dsfdsf", "deadline"=>"12/01/2021 04:08 am", "tag"=>"test"}}
TRANSACTION (0.3ms)  BEGIN
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
Task Create (0.8ms)  INSERT INTO "tasks" ("title", "description", "tag", "created_at", "updated_at", "deadline") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["title", "adfaf"], ["description", "dsfdsf"], ["tag", "test"], ["created_at", "2021-12-13 16:46:23.468751"], ["updated_at", "2021-12-13 16:46:23.468751"], ["deadline", "2021-01-12 04:08:00"]]
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
TRANSACTION (12.2ms)  COMMIT
↳ app/controllers/api/v1/tasks_controller.rb:20:in `create'
Completed 201 Created in 29ms (Views: 0.9ms | ActiveRecord: 13.3ms | Allocations: 2175)

以防万一你需要我的表单提交处理程序

const handleSubmit = (e) => {
e.preventDefault();
formSubmit(e.target);
};
const formSubmit = async (formData) => {
let data = new FormData(formData);
console.log(Array.from(data));
await fetch(api_url + "/tasks", {
method: "POST",
mode: "cors",
body: data,
})
.then((response) => response.json())
.then((response) => {
dispatch(setTasks(tasks.concat([response])));
dispatch(resetTask());
})
.catch((error) => console.log(error));
};

Answer 1

我意识到发送到api的表单数据中的日期格式是错误的；MM/dd/yyyy"；而不是"；yyyy/mm/dd"；这导致日期与月份混淆，并且当日期大于12时返回null(因为月份不能大于12(。

我只需要将我的dateTimePicker的格式更改为"；dd/MM/yyyy"；而不是"；MM/dd/yyyy"；这是默认值。两个"；yyyy/MM/dd"；以及"；dd/MM/yyyy"；works在将数据发送到数据库时查找。

这就是我在dateTimePicker 中更改格式的方式

<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(params) => (
<TextField
id="deadline_input"
type="text"
name="task[deadline]"
className={classes.dateTimePicker}
{...params}
/>
)}
value={deadline}
inputFormat="dd/MM/yyyy hh:mm a"
onChange={(newDate: Date | null) => {
newDate && dispatch(setDeadline(newDate));
}}
/>
</LocalizationProvider>

只需要将此添加到dateTimePicker

inputFormat="dd/MM/yyyy"

只是发布答案，以便以后在上帮助任何面临同样问题的人