React 如何从 datepicker 传递字段日期作为 Api url 参数

Question

我正在从以日期为参数的 API 获取数据
这个日期来自 react 的材料选择器，日期格式应该是 yyyy-MM-dd，但是当我用我的 datepicker 选择一个日期时，它会将日期传递为

2021 年 10 月 12 日星期二 00:00:00 GMT+0000（格林威治标准时间） 我希望 datpiecker 发送的日期是我要求的格式：yyyy-MM-dd 这是我的代码的一部分：

import React, { useState, useCallback, useEffect } from "react";
import DateFnsUtils from "@date-io/date-fns";
import {DatePicker, KeyboardDatePicker,MuiPickersUtilsProvider,} from "@material-ui/pickers";

function ExchangeRate() {
  

    const [date, setDate] = useState(moment().format("YYYY-MM-DD"));
   

    useEffect(() => {
   
  
    function getExchangeRates(base, currencyCode) {
       
        const url = `https://data.fixer.io/api/${date}?&base=USD`;

        
        return fetch(url)
            .then((res) => res.json())
            .then(handleAPIErrors)
            .then((res) => res.rates);
return (
          
          
                    </CSelect>
               
              


                  
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
    
            <KeyboardDatePicker
            autoOk
              label="Material Date Picker"
              format="yyyy-MM-dd"
              animateYearScrolling
              value={date}
              onChange={date => setDate(date)}
            />
            
          </MuiPickersUtilsProvider>

Answer 1

在 api URL 中使用时，您可以使用 moment 格式化您的日期，如下所示：

const url = `https://data.fixer.io/api/${moment(date).format("YYYY-MM-DD")}?&base=USD`;

或者，如果您想在状态中始终以该格式存储日期，您可以更改 onChange 事件，如下所示：

onChange={date => setDate(moment(date).format("YYYY-MM-DD"))}

在KeyboardDatePicker 组件中，format 属性仅定义日期在该组件中的显示方式，而不是在onChange 事件中的使用方式。