reactjs - 如何解决“派送”>' 不可分配给类型 '(value: DateRange | null, event: SyntheticEvent) => 无效'

Question

在 Rsuite DateRangePicker 中，会出现一个错误，例如 Type 'Dispatch<SetStateAction<Date[]>>' is not assignable to type '(value: DateRange | null, event: SyntheticEvent<Element, Event>) => void'。参数 'value' 和 'value' 的类型不兼容。键入“日期范围 | null' 不能分配给类型 'SetStateAction<Date[]>'。类型 'null' 不可分配给类型 'SetStateAction<Date[]>'.ts(2322)

onst DateRange = () => {
  const styles = {
    width: 260,
    display: 'block',
    marginBottom: 50,
    marginTop: 50,
    marginLeft: 20,
  }

  const [state, setstate] = useState([new Date('2017-02-01'), new Date('2017-05-20')])

  const { combine, allowedMaxDays, beforeToday } = DateRangePicker

  console.log(state)

  return (
    <>
      <h2>Sample POC for the Custom Date Range</h2>
      <DateRangePicker
        placeholder="Select a Date Range"
        format="dd-MM-yyyy"
        showOneCalendar
        style={styles}
        //disabledDate={combine(allowedMaxDays(7), beforeToday())}
        onChange={setstate}
        ranges={[
          {
            label: 'Yesterday',
            value: [addDays(new Date(), -1), addDays(new Date(), -1)],
          },
          {
            label: 'Today',
            value: [new Date(), new Date()],
          },
         
        ]}
      ></DateRangePicker>
    </>
  )
}

谁能告诉我，我们该如何解决这个问题？

Answer 1

您的 useState 暗示您的数据属于 Date[] 类型，但您正在尝试设置一个函数。

解决方案是在 setState 上设置一个特定的类型，只设置日期数据而不是整个函数。

//set type in <> before useState
  const [state, setstate] = useState<DateRange | null>([new Date('2017-02-01'), new Date('2017-05-20')])

const handleChange = (value: DateRange | null, event: SyntheticEvent<Element, Event>)) => {

setState(value) //<--- set date
}

//...
        onChange={handleChange} //<--- Get date and event data
//...