Tengo un componente React DatePicker con un elemento de entrada. Para manejar el evento onChange, tengo definida la función onChangeHandler. Sin embargo, cuando quiero definir los tipos de todas las funciones que se transmiten como parámetros en onChangeHandler, aparece el siguiente error:

El argumento de tipo '(value: string) => void' no se puede asignar al parámetro de tipo 'Dispatch'. Los tipos de parámetros 'valor' y 'valor' son incompatibles. El tipo 'SetStateAction' no se puede asignar al tipo 'cadena'. El tipo '(prevState: string) => string' no se puede asignar al tipo 'string'.ts(2345

Este error desaparece cuando defino la función como "cualquiera" pero, por supuesto, no queremos ninguna en el código :).

A continuación se muestra mi configuración. Tengo un componente de entrada llamado Selector de fecha en mi aplicación principal que obtiene un estado de la aplicación principal.

const [valor, establecerValor] = useState('');

Se transmite como accesorios a un componente DatePicker como tal:

 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> );

El componente DatePicker se parece a esto:

 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> </> );};

Así es como se define onChangeHandler y se usa 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;