使用react和类型记录

Question

我试图在类型记录中使用react-dates，但不知道如何定义这些类型。

下面的TS/React代码给出了错误

类型‘’startDate‘\’endDate“\ null‘的参数不能分配给'SetStateAction’类型的参数。键入“startDate”不能指定键入“SetStateAction”。

我的代码是基于此，有更简单的方法来编写这段代码吗？谢谢!

import React, { useState } from 'react';

import moment from 'moment';
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from 'react-dates';

interface IHandleDatesChange {
    startDate: moment.Moment | null,
    endDate: moment.Moment | null,
}

export function Foo(): JSX.Element {
    const [ startDate, setStartDate ] = useState<moment.Moment | null>(moment('1990-01-01'));
    const [ endDate, setEndDate ] = useState<moment.Moment | null>(moment(moment().endOf('year')));
    const [ focusedInput, setFocusedInput ] = useState(null);

    const handleDatesChange = ({ startDate, endDate}: IHandleDatesChange) => {
        setStartDate(startDate);
        setEndDate(endDate);
    }

    return (
        <DateRangePicker
            startDate={startDate}
            startDateId='daterangepicker_start_date'
            endDate={endDate}
            endDateId='daterangepicker_end_date'
            onDatesChange={handleDatesChange}
            focusedInput={focusedInput}
            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}   // <== ERROR OCCURS
        />
    )
}

yarn.lock

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==

Answer 1

编辑：

您还没有将类型传递给您的focusedInput状态。如果您检查@types/react-dates定义，onFocusChange支柱希望回调参数是一个特定类型：FocusedInputShape，它是一个字符串联合'startDate' | 'endDate'。

若要修复，请更新状态init：

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

原始答案：

我似乎还记得以前遇到过这个问题(或非常类似的问题)，结果是我的项目中安装的依赖项与react-dates安装的依赖项之间的react-dates版本不匹配。

检查安装了哪些版本，如果它们不匹配，如果可以的话，将您的项目版本升级/降级，看看它是否会产生影响。

Answer 2

下面是我如何使用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