当 React.Dispatch<React.SetStateAction<string>> 不被接受时，如何为 setState 函数定义 TypeScript 类型？

Posted 2023-02-19

【中文标题】当 React.Dispatch<React.SetStateAction<string>> 不被接受时，如何为 setState 函数定义 TypeScript 类型？

【英文标题】：How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?

【发布时间】：2021-04-25 15:47:56

【问题描述】：

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

'(value: string) => void' 类型的参数不可分配给 “调度”类型的参数。参数类型 “价值”和“价值”不兼容。类型“SetStateAction”不是 可分配给类型“字符串”。类型 '(prevState: string) => string' 是 不可分配给类型“字符串”.ts(2345

当我将函数定义为“任何”时，此错误消失，但我们当然不希望代码中有任何：)。

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

const [value, setValue] = useState('');

它作为 props 传递到 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;

【参考方案1】：

您应该将 IDatePickerProps 中的 setValue 类型设置为：

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

或者把onChangeHandler里面的setValue改成：

setValue: (value: string) => void;

【讨论】：

悬停在 setValue 上！