在 React POST 请求中使用 formData.append() 时事件开始和结束时间设置不正确

Question

我目前正在开发一个 React 项目，我需要在其中创建一个事件并将其保存到数据库中。该项目的前端是使用 React 构建的，我将事件详细信息作为

JSON

对象以及事件传单

file

发送到后端。为了确保正确传输这些详细信息，我在我的

POST

请求中使用了formData.append（）函数。

但是，我遇到了事件开始和结束日期和时间未正确保存的问题。

formData.append()

功能之前，事件开始和结束时间设置正确，但

formData.append()

功能之后，时间设置为当前时间，只保留日期。

所以这是我正在使用的代码：

export default function AddEvent() {
  let navigate = useNavigate();
  const [event, setEvent] = useState({
    eventName: "",
    eventType: "",
    eventLocationType: "",
  });
  const [location, setLocation] = useState("");
  const [startTime, setStartTime] = useState(moment());
  const [endTime, setEndTime] = useState(moment());
  const [selectedImage, setSelectedImage] = useState(undefined);
  const [imageUrl, setImageUrl] = useState(null);

  const { eventName, eventType, eventLocationType } = event;
const onInputChange = (e) => {
    if (e && e.target && e.target.name) {
      setEvent({ ...event, [e.target.name]: e.target.value });
    }
  };

  const handleLocationChange = (event, value) => {
    setLocation(event.target.value);
  };

  const handleStartTimeChange = (event) => {
    if (event && event.target && event.target.name) {
    setStartTime(moment(event.target.value));
      //setStartTime(event.target.value);
    }
  };

  const handleEndTimeChange = (event) => {
    if (event && event.target && event.target.name) {
    setEndTime(moment(event.target.value));
      //setEndTime(event.target.value);
    }
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    console.log({ ...event, location, startTime, endTime, selectedImage });
    const formData = new FormData();
    formData.append("file", selectedImage);
    formData.append(
      "body",
      JSON.stringify({
        ...event,
        location,
        startTime,
        endTime,
      })
    );
    for (let pair of formData.entries()) {
      console.log(pair[0] + ": " + pair[1]);
    }
    
    await axios
      .post("http://localhost:8080/api/event/saveEvent", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        console.log(response);
        Swal.fire({
          title: "Event saved successfully!",
          icon: "success",
          confirmButtonText: "OK",
        }).then(() => {
          navigate("/");
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

 return (
    <div style={{ paddingBottom: "30px" }}>
 <FormControl
        encType="multipart/form-data"
        onSubmit={(e) => onSubmit(e)}
        sx={{ display: "flex", width: "50%", paddingLeft: "250px" }}
      >
<FormLabel
              disabled={true}
              sx={{
                paddingBottom: "10px",
                display: "flex",
                justifyContent: "flex-start",
              }}
            >
              Event Start Date & Time
            </FormLabel>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DemoContainer components={["DateTimeField"]}>
                <DateTimeField
                  size="small"
                  label="Start Date & Time"
                  name="startTime"
                  value={startTime}
                  onChange={handleStartTimeChange}
                  sx={{
                    "& .Mui-focus": {
                      "&:focus": {
                        outline: "none",
                        color: "grey",
                      },
                    }
                  }}
                />
              </DemoContainer>
            </LocalizationProvider>
          </div>

          <div>
            <FormLabel
              disabled={true}
              sx={{
                paddingBottom: "10px",
                display: "flex",
                justifyContent: "flex-start",
              }}
            >
              Event End Date & Time
            </FormLabel>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DemoContainer components={["DateTimeField"]}>
                <DateTimeField
                  size="small"
                  label="End Date & Time"
                  name="endTime"
                  value={endTime}
                  onChange={handleEndTimeChange}
                />
              </DemoContainer>
            </LocalizationProvider>
          </div>
        </div>
<Box
          sx={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "flex-end",
          }}
        >
          <Button
            variant="outlined"
            onClick={onCancel}
            style={{ color: "#e6b81a", borderColor: "#e6b81a" }}
          >
            Cancel
          </Button>
          <Button
            variant="contained"
            onClick={onSubmit}
            style={{ backgroundColor: "#e6b81a", marginLeft: "10px" }}
          >
            Save
          </Button>
        </Box>
      </FormControl>
</div>
  );
}

我找不到这背后的错误。我正在寻找有关如何解决此问题的指导。任何帮助或建议将不胜感激。

Answer 1

我之前发的问题自己解决了。进一步的调查和测试使我得出结论，在 formData 中发送的 startTime 和 endTime 值是问题的根源。

我将 startTime 和 endTime 值作为时刻对象提交给 onSubmit 函数。但是，当您使用

JSON.stringify()

.

序列化 JSON 对象时，moment 对象未正确转换为字符串值

在将 moment 对象添加到 formData 之前，可以将它们转换为字符串值来解决此问题。 moment 对象的 format() 方法可用于将其转换为具有特定格式的字符串。我使用以下代码将开始时间和结束时间值更改为格式 YYYY-MM-DDTHH:mm:ss:

formData.append(
  "body",
  JSON.stringify({
    ...event,
    location,
    startTime: startTime.format("YYYY-MM-DDTHH:mm:ss"),
    endTime: endTime.format("YYYY-MM-DDTHH:mm:ss"),
  })
);