Javascript 反应日期选择器和时刻

大家晚上好，我对日期选择和时间有点问题。我已经格式化了日期和时刻，但仍然收到UTC错误。 尽管显示了我的道具，并且孩子们从家长那里得到了初始化，但日期仍然是错误的a格式，并且我从中获得数据的API使用的是日期的

yyy-MM-DD

格式

我已经用moment和react日期选择器完成了所有关于日期和时间格式的知识。当我使用普通表单时，一切正常，但日期选择器有问题。我可以毫无问题地获取数据。我希望用户能够使用应用程序选择不同的日期或随机选择。为了更清晰，我附加了一些屏幕截图。谢谢

        import React, { useState, useEffect } from "react";
        import axios from "axios";
        // import "./App.css";
        import moment from "moment";
        import styled from "styled-components";
        import DatePicker from "react-datepicker";
        import DisplayImg from "./components/DisplayImg"


        const ApodImg = styled.div`
        display:flex;
        object-fit:scale;
        padding-top 1rem;
        margin-bottom:1rem;
        width:80%;
        `;

        function App() {
          const [nasa, setNasa] = useState([]);

          const [curDate, setCurDate] = useState("")

          //  function changeDate(e) {[enter image description here][1]
          //   //disable button to avoid spamming
          //   e.target.setAttribute('disabled', true);
          //   //sets the value of what was picked on the input
          //   setCurDate(e.target.value);


          //  }

          // let newDate = new Date()
          // let year = newDate.getFullYear().toString()
          // let month = (newDate.getMonth() + 1).toString().padStart(2, '0')
          // let day = newDate.getDate().toString()
          // //format for api use, needs 2 digit month and day always
          // let formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(
          //    2,
          //    '0'
          // )}`


          function change(e) {
            // disable button to avoid spamming
            e.target.setAttribute('disabled', true);
            // sets the value of what was picked on the input
            setCurDate(e.target.value);
          }

          // grabbing new (current) date
          let newDate = new Date()
          // grabbing the year from newDate above this
          let year = newDate.getFullYear().toString()
          // grabbing month from newDate adding 1 because JS numbers start at 0
          // turning it into a string. padStart places a 0 in front of the month since the current month is 1 digit
          let month = (newDate.getMonth() + 1).toString().padStart(2, '0')
          // grabbing day from newDate and turning it into a string
          let day = newDate.getDate().toString()
          //format for api to use, needs 2 digit month and day always (YYYY-MM-DD)
          let formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(
            2,
            '0'
          )}`

          // setting setStartDate to formattedDate.toString()
          const [startDate, setStartDate] = useState(formattedDate.toString());

          useEffect(() => {
            const fetchData = () => {

            axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j`)
              .then(res => {
                // setNasa(res.data)

                console.log(res)
              })

              .catch(error => {
                console.log("the data was requested", error)
              })

            }
            fetchData()

          }, [])

          useEffect(() => {
            const getPhoto = date => {
              axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j&date=${startDate}`)

                .then(response => {
                  console.log(response)
                })

                .catch(error => {
                  console.log("The data was requested", error)
                })

            }
          }, [formattedDate])




          return (
            <ApodImg >

              <DatePicker selected={startDate} title='Pick a Date to View Another Image' onChange={e => change(e)} type='date' />
              <DisplayImg data={nasa} />
            </ApodImg>
          );
        }

        export default App;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
//导入“/App.css”；
从“时刻”中导入时刻；
从“样式化组件”导入样式化；
从“反应日期选择器”导入日期选择器；
从“/components/DisplayImg”导入DisplayImg
const ApodImg=styled.div`
显示器：flex；
对象匹配：尺度；
填充顶部1rem；
边缘底部：1rem；
宽度：80%；
`;
函数App（）{
const[nasa，setNasa]=useState（[]）；
const[curDate，setCurDate]=useState（“”）
//函数changeDate（e）{[在此处输入图像描述][1]
////禁用按钮以避免垃圾邮件
//e.target.setAttribute（'disabled'，true）；
////设置在输入上拾取的内容的值
//setCurDate（即目标值）；
//  }
//设newDate=newDate（）
//让year=newDate.getFullYear（）.toString（）
//let month=（newDate.getMonth（）+1.toString（）.padStart（2，'0'））
//let day=newDate.getDate（）.toString（）
////用于api的格式，始终需要2位数的月和日
//让formattedDate=`${year}-${month.padStart（2，'0'）}-${day.padStart(
//    2,
//    '0'
// )}`
功能改变（e）{
//禁用按钮以避免垃圾邮件
e、 target.setAttribute（'disabled'，true）；
//设置在输入上拾取的内容的值
setCurDate（即目标值）；
}
//抓取新（当前）日期
设newDate=newDate（）
//从上面的newDate开始抓取年份
让year=newDate.getFullYear（）.toString（）
//从newDate开始抓取月份添加1，因为JS编号从0开始
//将其转换为字符串。padStart将0放在月份前面，因为当前月份是1位数字
let month=（newDate.getMonth（）+1.toString（）.padStart（2，'0'））
//从newDate抓取日期并将其转换为字符串
let day=newDate.getDate（）.toString（）
//api使用的格式，始终需要2位数的月和日（YYYY-MM-DD）
让formattedDate=`${year}-${month.padStart（2，'0'）}-${day.padStart(
2.
'0'
)}`
//将setStartDate设置为formattedDate.toString（）
const[startDate，setStartDate]=useState（formattedDate.toString（））；
useffect（（）=>{
常量fetchData=（）=>{
axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j`)
。然后（res=>{
//setNasa（资源数据）
console.log（res）
})
.catch（错误=>{
日志（“请求数据”，错误）
})
}
fetchData（）
}, [])
useffect（（）=>{
const getPhoto=date=>{
axios.get(`https://api.nasa.gov/planetary/apod?api_key=SJhTpR8dpNuNDns5czrQKr4iLMWoNA6hEkKEtO1j&date=${startDate}`）
。然后（响应=>{
console.log（响应）
})
.catch（错误=>{
日志（“请求数据”，错误）
})
}
}，[formattedDate]）
返回(
更改（e）}type='date'/>
);
}
导出默认应用程序；

使用矩API将日期选择器输出转换为所需的格式

---

例如：矩（date，'DD/MM/YYYY'）。格式（'YYYY-MM-DD'）

也可以使用日期选择器格式

 <DatePicker format={"DD/MM/YYYY"} value={this.state.date}  onChange={this.onChange}/>

---

我正在编写一个函数组件而不是类组件，我已经尝试过了，甚至更多的尝试都得到了UTC时间错误，并且在我的状态下日期格式没有改变。

 let formatedDate = moment(this.state.date).format('YYYY-MM-DD');