리액트 시 setState 함수의 TypeScript 유형을 정의하려면 어떻게 해야 합니까?디스패치>가 접수되지 않았습니까?

리액트 시 setState 함수의 TypeScript 유형을 정의하려면 어떻게 해야 합니까?디스패치>가 접수되지 않았습니까?

입력 요소가 있는 React DatePicker 컴포넌트가 있습니다.onChange 이벤트를 처리하기 위해 onChangeHandler 함수를 정의했습니다.단, onChangeHandler에서 파라미터로 전달되는 모든 함수의 유형을 정의하면 다음 오류가 발생합니다.

'(값: 문자열) => void' 형식의 인수는 '디스패치' 형식의 매개 변수에 할당할 수 없습니다.매개 변수 'value'와 'value' 유형이 호환되지 않습니다.'StateAction' 유형은 'string' 유형에 할당할 수 없습니다.'(prevState: string)' => string' 유형은 'string' 유형에 할당할 수 없습니다.ts(2345)

함수를 "any"로 정의하면 이 오류는 사라지지만, 물론 코드 :)에는 아무것도 포함하지 않습니다.

다음은 제 설정입니다.메인 앱에 Datepicker라는 입력 컴포넌트가 있어서 메인 앱에서 상태를 가져옵니다.

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;

IDatePickerProps 내의 setValue 유형을 다음과 같이 설정해야 합니다.

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

또는 onChangeHandler 내의 setValue를 다음과 같이 변경합니다.

setValue: (value: string) => void;

이에 대한 나의 솔루션(가독성이 더 좋다고 생각한다):
IDatePickerProps에서

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

언급URL : https://stackoverflow.com/questions/65823778/how-can-i-define-typescript-type-for-a-setstate-function-when-react-dispatchrea