React.Dispatch 时如何为 setState function 定义 TypeScript 类型<react.setstateaction<string> &gt; 不接受？ </react.setstateaction<string>

Question

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

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

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

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

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

它作为道具传递给 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;

Answer 2

我对此的解决方案（我认为它更具可读性）：
在 IDatePickerProps

  setValue: (setValueFunc: (value: string) => void) => void;