如何使用 Typescript 将数据存储到 rsuite 中的 DateRangePicker 变量中？

Question

我正在尝试使用 rsuite 中的 DateRangePicker 将日期范围存储到数组中。现在我的应用程序按预期工作，但我仍然在 Typescript 中遇到一些错误。我该如何正确地做到这一点？

import { DateRangePicker } from "rsuite";

const [dateRange, setDateRange] = useState([]);

<DateRangePicker
   format="MM/dd/yyyy"
   character=" – "
   value={dateRange}          //value has error
   onChange={setDateRange}    //onChange has error
/>

值错误：类型“never[]”无法分配给类型“[Date, Date]”。 目标需要 2 个元素，但源可能更少。ts(2322)

onChange 错误：类型“Dispatch>”无法分配给类型“(value: DateRange | null, event: SyntheticEvent) => void”。 参数“value”和“value”的类型不兼容。 输入“日期范围|” null' 不可分配给类型'SetStateAction'。 类型“null”不可分配给类型“SetStateAction”.ts(2322)

我也尝试过以下方法，但 setDate(range) 中的“范围”也抛出错误

<DateRangePicker
   format="MM/dd/yyyy"
   character=" – "
   onChange={(range) => setDateRange(range)}    //2nd range has error
/>

范围错误：类型为“DateRange |”的参数null' 不可分配给'SetStateAction' 类型的参数。 类型“null”不可分配给类型“SetStateAction”.ts(2345)

Answer 1

在使用 rsuite 中的 DateRangePicker 时，您似乎遇到了 TypeScript 类型问题。要解决这些错误，您需要为状态和 onChange 处理程序提供适当的类型。具体方法如下：

import { DateRangePicker } from "rsuite";
import { Dispatch, SetStateAction, SyntheticEvent } from "react";

interface MyComponentProps {
  // Add any other props if needed
}

const MyComponent: React.FC<MyComponentProps> = () => {
  const [dateRange, setDateRange] = useState<[Date?, Date?]>([]);

  const handleDateChange = (
    value: DateRange | null,
    event: SyntheticEvent<Element, Event>
  ) => {
    if (value) {
      setDateRange([value[0], value[1]]);
    } else {
      // Handle null case if needed
      setDateRange([]);
    }
  };

  return (
    <DateRangePicker
      format="MM/dd/yyyy"
      character=" – "
      value={dateRange}
      onChange={handleDateChange}
    />
  );
};

1.useState 钩子将 dateRange 初始化为可选 Date 类型的元组。

2.handleDateChange函数确保传递给setDateRange的值是两个可选Date类型的元组或空数组。

这应该可以解决您遇到的 TypeScript 错误。根据您的具体要求调整类型和处理。