React 如何将日期选择器中的字段日期作为 Api url 参数传递

Question

我正在从以日期作为参数的 API 中获取数据
这个日期来自反应的 material 选择器，日期格式应该是 yyyy-MM-dd，但是当我 select 使用我的日期选择器的日期时，它将日期传递为

Tue Oct 12 2021 00:00:00 GMT+0000 (Greenwich Mean Time) I want the date sent by datpiecker to be as my required format: yyyy-MM-dd this is a prt of my code :

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 事件中的使用方式。

React 如何将日期选择器中的字段日期作为 Api url 参数传递

React How to pass field date from datepicker as Api url parameter

arrays

reactjs

datepicker

fetch