Javascript 将日期与Typescript一起使用_Javascript_Reactjs_Typescript_React Typescript_React Dates

Javascript 将日期与Typescript一起使用

javascript reactjs typescript

Javascript 将日期与Typescript一起使用,javascript,reactjs,typescript,react-typescript,react-dates,Javascript,Reactjs,Typescript,React Typescript,React Dates,我试图将react dates与Typescript一起使用，但无法确定如何定义类型以下TS/React代码给出了错误类型为“startDate”|“endDate”| null”的参数不能分配给类型为“SetStateAction”的参数。类型“startDate”不可分配给类型“SetStateAction” 我的代码是，有没有更简单的方法来编写这个代码？谢谢大家! import React，{useState}来自“React”；从“力矩”中导入力矩；导入“反应日期/初始化”；

我试图将

react dates

与Typescript一起使用，但无法确定如何定义类型

以下TS/React代码给出了错误

类型为“startDate”|“endDate”| null”的参数不能分配给类型为“SetStateAction”的参数。类型“startDate”不可分配给类型“SetStateAction”

我的代码是，有没有更简单的方法来编写这个代码？谢谢大家!

import React，{useState}来自“React”；
从“力矩”中导入力矩；
导入“反应日期/初始化”；
导入“react dates/lib/css/_datepicker.css”；
从“反应日期”导入{DateRangePicker}；
接口IHandleDatesChange{
起始日期：时刻。时刻为空，
结束日期：时刻。时刻|空，
}
导出函数Foo（）：JSX.Element{
常数[startDate，setStartDate]=使用状态（矩（'1990-01-01'）；
const[endDate，setEndDate]=useState（矩（矩（）.endOf（'year'））；
const[focusedInput，setFocusedInput]=useState（null）；
const handleDatesChange=（{startDate，endDate}:IHandleDatesChange）=>{
设置开始日期（开始日期）；
setEndDate（endDate）；
}
返回(
setFocusedInput（focusedInput）}//
)
}

纱线.锁紧

react-dates@^21.8.0:
  version "21.8.0"
  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.8.0.tgz#355c3c7a243a7c29568fe00aca96231e171a5e94"
  integrity sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==
  dependencies:
    airbnb-prop-types "^2.15.0"
    consolidated-events "^1.1.1 || ^2.0.0"
    enzyme-shallow-equal "^1.0.0"
    is-touch-device "^1.0.1"
    lodash "^4.1.1"
    object.assign "^4.1.0"
    object.values "^1.1.0"
    prop-types "^15.7.2"
    raf "^3.4.1"
    react-moment-proptypes "^1.6.0"
    react-outside-click-handler "^1.2.4"
    react-portal "^4.2.0"
    react-with-direction "^1.3.1"
    react-with-styles "^4.1.0"
    react-with-styles-interface-css "^6.0.0"

...

"@types/react-dates@^21.8.1":
  version "21.8.1"
  resolved "https://registry.yarnpkg.com/@types/react-dates/-/react-dates-21.8.1.tgz#f90b30895e22d15f42c64be6bbafb1796b5f05f8"
  integrity sha512-zgBf0SM6dcDPR29x3bCzSypK0c2+EKDkR4NNyBCwH2GyL/AgIvJ0bQ6n2z1s468SXS2QbzCMJtF831vG7iGkjg==
  dependencies:
    "@types/react" "*"
    "@types/react-outside-click-handler" "*"
    moment "^2.26.0"

...

moment@>=1.6.0, moment@^2.26.0, moment@^2.29.1:
  version "2.29.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==

编辑：

您尚未将类型传递到您的

focusedInput

状态。如果检查

@types/react dates

定义，则

onFocusChange

属性要求回调参数为特定类型：它是字符串联合

'startDate'|'endDate'

要修复此问题，请更新您的状态初始化：

const [ focusedInput, setFocusedInput ] = useState<FocusedInputShape | null>(null);

const[focusedInput，setFocusedInput]=useState（null）；

原始答案：

我似乎记得以前碰到过这个问题（或非常类似的问题），结果是我的项目中安装的依赖项和由

react dates安装的依赖项之间的版本不匹配
检查安装了哪些版本，如果它们不匹配，可以升级/降级您的项目版本，看看它是否有区别。
编辑：
您尚未将类型传递到您的focusedInput
状态。如果检查@types/react dates
定义，则onFocusChange
属性要求回调参数为特定类型：它是字符串联合'startDate'|'endDate'

要修复此问题，请更新您的状态初始化：
const [ focusedInput, setFocusedInput ] = useState<FocusedInputShape | null>(null);

const[focusedInput，setFocusedInput]=useState（null）；

原始答案：
我似乎记得以前碰到过这个问题（或非常类似的问题），结果是我的项目中安装的依赖项和由react dates安装的依赖项之间的版本不匹配
检查安装了哪些版本，如果它们不匹配，可以升级/降级您的项目版本，看看它是否有区别。
以下是我如何获得使用TS的基本示例
import React, { ReactNode, useState } from 'react'
import moment, { Moment } from 'moment'
import 'react-dates/initialize'
import 'react-dates/lib/css/_datepicker.css'
import { DateRangePicker, FocusedInputShape } from 'react-dates'

const Calendar = () => {
  const [startDate, setStartDate] = useState<Moment | null>(moment())
  const [endDate, setEndDate] = useState<Moment | null>(null)
  const [focusedInput, setFocusedInput] = useState<FocusedInputShape | null>(
    null
  )

  const handlendDatesChange = (arg: {
    startDate: Moment | null
    endDate: Moment | null
  }) => {
    setStartDate(arg.startDate)
    setEndDate(arg.endDate)
  }

  const handleFocusChange = (arg: FocusedInputShape | null) => {
    setFocusedInput(arg)
  }

  return (
    <DateRangePicker
      /**
       * Tip for who is new to TS: You can view the type definition on hover in VSCode.
       * You can use these types on their respective useState and function.
       */
      startDate={startDate} // moment.Moment | null;
      startDateId="your_unique_start_date_id" // moment.Moment | null;
      endDate={endDate} // momentPropTypes.momentObj or null,
      endDateId="your_unique_end_date_id" // string;
      onDatesChange={handlendDatesChange} // (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
      focusedInput={focusedInput} // FocusedInputShape | null;
      onFocusChange={handleFocusChange} // (arg: FocusedInputShape | null) => void;
    />
  )
}

export default Calendar

import React，{ReactNode，useState}来自“React”
导入力矩，{moment}来自“力矩”
导入“反应日期/初始化”
导入'react dates/lib/css/_datepicker.css'
从“反应日期”导入{DateRangePicker，FocusedInputShape}
常量日历=（）=>{
常量[startDate，setStartDate]=useState（矩（））
常量[endDate，setEndDate]=useState（null）
常量[focusedInput，setFocusedInput]=useState(
无效的
)
常量handlendateschange=（参数：{
起始日期：力矩|零
结束日期：时刻|空
}) => {
设置开始日期（参数开始日期）
setEndDate（参数endDate）
}
const handleFocusChange=（arg:FocusedInputShape | null）=>{
设置焦点输入（arg）
}
返回(
无效的
focusedInput={focusedInput}//FocusedInputShape | null；
onFocusChange={handleFocusChange}//（arg:FocusedInputShape | null）=>void；
/>
)
}
导出默认日历
下面是我如何获得使用TS的基本示例的
import React, { ReactNode, useState } from 'react'
import moment, { Moment } from 'moment'
import 'react-dates/initialize'
import 'react-dates/lib/css/_datepicker.css'
import { DateRangePicker, FocusedInputShape } from 'react-dates'

const Calendar = () => {
  const [startDate, setStartDate] = useState<Moment | null>(moment())
  const [endDate, setEndDate] = useState<Moment | null>(null)
  const [focusedInput, setFocusedInput] = useState<FocusedInputShape | null>(
    null
  )

  const handlendDatesChange = (arg: {
    startDate: Moment | null
    endDate: Moment | null
  }) => {
    setStartDate(arg.startDate)
    setEndDate(arg.endDate)
  }

  const handleFocusChange = (arg: FocusedInputShape | null) => {
    setFocusedInput(arg)
  }

  return (
    <DateRangePicker
      /**
       * Tip for who is new to TS: You can view the type definition on hover in VSCode.
       * You can use these types on their respective useState and function.
       */
      startDate={startDate} // moment.Moment | null;
      startDateId="your_unique_start_date_id" // moment.Moment | null;
      endDate={endDate} // momentPropTypes.momentObj or null,
      endDateId="your_unique_end_date_id" // string;
      onDatesChange={handlendDatesChange} // (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
      focusedInput={focusedInput} // FocusedInputShape | null;
      onFocusChange={handleFocusChange} // (arg: FocusedInputShape | null) => void;
    />
  )
}

export default Calendar

import React，{ReactNode，useState}来自“React”
导入力矩，{moment}来自“力矩”
导入“反应日期/初始化”
导入'react dates/lib/css/_datepicker.css'
从“反应日期”导入{DateRangePicker，FocusedInputShape}
常量日历=（）=>{
常量[startDate，setStartDate]=useState（矩（））
常量[endDate，setEndDate]=useState（null）
常量[focusedInput，setFocusedInput]=useState(
无效的
)
常量handlendateschange=（参数：{
起始日期：力矩|零
结束日期：时刻|空
}) => {
设置开始日期（参数开始日期）
setEndDate（参数endDate）
}
const handleFocusChange=（arg:FocusedInputShape | null）=>{
设置焦点输入（arg）
}
返回(
无效的
focusedInput={focusedInput}//FocusedInputShape | null；
onFocusChange={handleFocusChange}//（arg:FocusedInputShape | null）=>void；
/>
)
}
导出默认日历
我已经用时刻
和反应日期
的版本更新了这个问题。你能回忆起你用过的版本吗？我记不清了，但我会检查一下是否能找到旧的项目。moment
是否依赖于您的项目？我建议您确保使用react dates
deps（）中列出的确切版本，看看是否有帮助。社区打字@types/react dates
也使用了不同的版本2.26.0
，这并不理想。谢谢！是<代码>moment@2.29.1
是我的项目的一个依赖项。我已尝试降级到@types/react-dates@21.8.0
在维护时做出反应-dates@21.8.0
，仍然收到相同的错误。不知道我的打字脚本代码是否有问题……你最终解决了吗？我想我已经发现了实际的问题，并且它不是冲突版本的moment
-您需要将类型传递到您的focusedInput
状态。我会用建议的解决方案更新我的答案。猜猜你的新答案