react-timepicker typescript 변수 타입 설정 관련

Question

react에서 react-datepicker 라는 라이브러리(날짜선택 기능)을 활용하여 선택한 날짜를 state(checkedFlightDate)값을 설정하고자 합니다.https://reactdatepicker.com/아래와 같이 checkedFlightDate 변수 값의 타입을 지정중입니다.Datepick 컴포넌트의 onClick 함수의 파라미터(date)는 Date 객체 타입이라서 타입을 적용 후 타입 에러가 발생해해당 값의 타입을 수정했는데(Date -> Date | null )도 아직 해결이 되지 않습니다.import { useEffect, useState } from "react" import SelectBox from "../../utils/selectBox" import FlightData from "./FlightData" import FlightDataSegments from "./FlightDataSegments" import {selectFlightOptionsType} from "./type" import DatePicker from "react-datepicker" import "react-datepicker/dist/react-datepicker.css"; import { ko } from "date-fns/locale" export default function Flight(){ const AMADEUS_API_ID = "-----" const AMADEUS_API_KEY = "----" const[accessToken, setAccessToken] = useState('') const[flightData, setFlightData] = useState([]) const[flightDataSegments, setFlightDataSegments] = useState>([]) const[searchFlightOption, setSearchFlightOption] = useState({ departCountry : "", departIataCode : "", arriveCountry : "", arriveIataCode : "", checkedFlightDate: new Date()}) const changeDepartCountry = (e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, departCountry : e.target.value}) } const changeDepartIataCode = (e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, departIataCode: e.target.value}) } const changeArriveCountry = (e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, arriveCountry : e.target.value}) } const changeArriveIataCode = (e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, arriveIataCode: e.target.value}) } const changeFlightDate = (date : Date) => { setSearchFlightOption({...searchFlightOption, checkedFlightDate : date}) } return( <> 조회조건 선택 changeFlightDate(date)} /> ) }export type selectFlightOptionType= { departCountry : string, departIataCode : string, arriveCountry : string, arriveIataCode :string checkedFlightDate : Date | null }

wlgns2223 · Accepted Answer

onChange으로 들어오는 파라미터 Date은 Date | null 상태이고 , changeFlightDate는 Date만 받도록 되어있으니까 그런거 아닌가요? changeFlightDate가 null을 받을 수 있도록 하시거나, onChange핸들러에서 date이 null일경우 따로 예외처리를 하셔서 changeFlightDate에는 Date타입만 넣도록 하시면 될꺼같아요.

react-timepicker typescript 변수 타입 설정 관련

1개의 답변

#datepicker 목록