javascript - Hvordan kan jeg definere type for setState når React.Dispatch<React.SetStateAction<string>> ikke godtas?

Jeg har en React DatePicker-komponent med et input-element. For å håndtere onChange-hendelsen har jeg en onChangeHandler-funksjon definert. Men når jeg vil definere typene til alle funksjonene som sendes ned som parametere i onChangeHandler, får jeg følgende feil:

Argument of type '(value: string) => void' is not assignable to parameter of type 'Dispatch<SetStateAction>'. Types of parameters 'value' and 'value' are incompatible. 
Type 'SetStateAction' is not assignable to type 'string'. Type '(prevState: string) => string' is not assignable to type 'string'.ts(2345

Denne feilen forsvinner når jeg definerer funksjonen som any, men selvfølgelig ønsker vi ikke any i koden :).

Nedenfor er oppsettet mitt. Jeg har en inndata-komponent kalt Datepicker i hovedappen min som får en tilstand fra hovedappen.

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

Det blir sendt videre som props inn i en DatePicker-komponent på følgende måte:

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

Komponenten DatePicker ser omtrent slik ut:

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

Slik er onChangeHandler definert og setValue brukt:

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

Svar #1

Du bør sette typen til setValue inne i IDatePickerProps til:

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

Eller endre setValue inne i onChangeHandler til:

setValue: (value: string) => void;

Svar #2

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

du må finne ut hvilken type dataene dine er og endre det i stedet for any

Relaterte artikler