将日期作为 url 参数发送到 API 时反应日期时间格式不起作用答案

【问题标题】：React datetime format not working when sending date as url parameter to API将日期作为 url 参数发送到 API 时反应日期时间格式不起作用
【发布时间】：2020-10-22 03:32:41
【问题描述】：

我正在尝试将日期时间值作为 url 参数传递给后端 java api，我正在使用 GET 方法发送请求。但是在 api 端我只得到了日期时间字符串的一部分，日期时间字符串的其他部分被切断了。

我的反应代码

  const handleStartDate = date => {
    setStartDate(date);
    const formattedDttm =  format(date, "dd.MM.yyyy H:mm:ss", { timeZone: "Asia/Kolkata" });
    console.log(formattedDttm);
   DataService.findByDttmOfSale(formattedDttm)
    .then(response => {
      Entry.price = response.data.price;
    }).catch(e => {
      if (e.response && e.response.data) {
        setMessage(e.response.data.message);
        setAlertHeading("Error!");
        setAlertVariant("danger");
        setShow(true);
        console.log(e.response.data.message); // some reason error message
      }
      console.log(e);
    });
  };

在java后端

@GetMapping("/FromDttmOfSale/{dttm_of_sale}")
public TestMO getFromDateTimeOfSale(@PathVariable(value = "dttm_of_sale") String 
 dateTimeOfSale) throws Exception {
    System.out.println(" get mo from date time of sale date value is = " + dateTimeOfSale);
    TestMO testMO = fuelService.getFuelPriceByDateTime(dateTimeOfSale);
    return testMO ;
}

我从 react js 输入的日期格式为 11/10/2020 8:42 AM，而在后端我只得到日期字符串的一部分为 date time of sale date value is = 11.10

在转换过程中，日期字符串被剥离的位置相同。我也试过改变格式，但得到同样的错误

【问题讨论】：

标签： javascript java reactjs spring react-datepicker

【解决方案1】：

最好将日期作为字符串传递，然后在后端将其格式化为日期。

【讨论】：

如何转成字符串？
不是日期参数已经是一个字符串，你只是将它转换为一个日期对象？
它不是字符串，它是来自 datepicker 组件的日期
Here。所以date.toString().

【解决方案2】：

我已将日期参数从 11/10/2020 8:42 AM 更改为 11 10 2020 8:42 AM 并开始工作。似乎在 url 中发送特殊字符有限制

【讨论】：

【解决方案3】：

我遇到了同样的错误，我使用两个选项解决了它，第一个是使用 moment 库，第二个是我认为在将日期发送到后端之前更好地将日期转换为 ISOString。

export async function getAssessmentsByDate(dateInit, dateEnd, clientId) {
  try {
    const response = await getApi().get(
      `/assessment/${clientId}?dateInit=${dateInit.toISOString()}&dateEnd=${dateEnd.toISOString()}`,
      {}
    );

    return response;
  } catch (error) {
    return { status: 400, message: 'Cant..' };
  }
}

在后端（nodejs）我以这种方式接收它。我建议您在使用之前验证字符串。它对我来说非常有效。

const getClientAssessmentByDate = async (req, res) => {
  try {
    const clientId = parseInt(req.params.id);
    const dateInit = req.query.dateInit;
    const dateEnd = req.query.dateEnd;
    /** .... */
   /** 3. find evaluations */
    const results = await AssessmentResult.findAll({
      where: {
        createdAt: {
          [Op.between]: [dateInit, dateEnd]
        }
      }
   })
    /** .... */
  } catch (e) {
    return res.status(500).send('error processing request');
  }
}

【讨论】：