当React.Dispatch未被接受时，如何为setState函数定义TypeScript类型？

Question

我有一个带有输入元素的React DatePicker组件。为了处理onChange事件，我定义了onChangeHandler函数。但是，当我想要定义作为onChangeHandler中的参数传递的所有函数的类型时，我得到以下错误：

类型为“”的参数（值：字符串）=

当我将函数定义为“any”时，这个错误就消失了，但是我们当然不希望代码中有任何错误：）。

下面是我的设置。我的主应用程序中有一个名为Datepicker的输入组件，它从主应用程序获取状态。

它作为道具传递给DatePicker组件，如下所示：

  return (
        <form>
            <label htmlFor="date-picker-input">Date:</label><br />
            **<DatePicker value={value} setValue={setValue} dateFormat="YYYY/MM/DD" />**
            <button type="submit" value="Submit">Submit</button>
        </form>
);

DatePicker组件如下所示：

    import onChangeHandler from "../utility/onChangeHandler";

  interface IDatePickerProps {
   applicationMode?: boolean;
   value: string;
   setValue: (value: string) => void;
   dateFormat: DateFormat;}  
    
    const DatePicker: React.FC<IDatePickerProps> = (props) => {
           const { value, setValue, dateFormat } = props
           const applicationMode = props.applicationMode ? true : false;
           const [showCalendar, setShowCalendar] = useState(false);
           const [errorMessage, setErrorMessage] = useState("");
           const [clickedDate, setClickedDate] = useState<IClickedDate>({});
           const [dateObject, setDateObject] = useState<IDateObject>({});
           const [isClicked, setIsClicked] = useState<IIsClicked>({});
              //bunch of functions 
        
 return (
    <>
      <div>
        <label htmlFor="date-picker-input aria-label="enter date in the following format">{dateFormat}</label>
        <button><CalendarIcon /></button>
        <input id="date-picker-input" type="text" value={value}
    onChange={(e) => onChangeHandler(e, dateFormat, setValue, setErrorMessage, setClickedDate, 
    setIsClicked)} />
      </div>
      <div >
        <MonthPicker/>
        <table>
        <DaysHeading />
        <DatesOfMonth />
        </table>
      </div>
   </> );};

以下是如何定义onChangeHandler和使用setValue：

const onChangeHandler = (
    event: React.ChangeEvent<HTMLInputElement>,
    dateFormat: string,

**//line causing the error is here:**
    setValue: React.Dispatch<React.SetStateAction<string>>,

    setErrorMessage: React.Dispatch<React.SetStateAction<string>>,
    setClickedDate: React.Dispatch<React.SetStateAction<IClickedDate>>,
    setIsClicked: React.Dispatch<React.SetStateAction<IIsClicked>>): void => {

    const value = event.target.value;
    setValue(value);
    let date = "";
    let month = "";
    let year = "";
    let dateFormatCheck;
    let dateIsValid;
    let invalidAt;
    const errorNote = "Please check entered "

    if (value.length === 10) {
        setErrorMessage("");
        if (dateFormat === "YYYY/MM/DD") {
            dateFormatCheck = moment(value, 'YYYY/MM/DD', true);
            dateIsValid = dateFormatCheck.isValid();

            if (dateIsValid === true) {
                //do some stuff
            }
            else {
                invalidAt = dateFormatCheck.invalidAt();
                setErrorMessage(errorNote + errorDefinition(invalidAt));
            }
        }
    //some other validators and no return value
export default onChangeHandler;

Answer 1

应将IDatePickerProps内的setValue类型设置为：

setValue : React.Dispatch<React.SetStateAction<string>>

或将onChangeHandler中的setValue更改为：

setValue: (value: string) => void;