当不接受 React.Dispatch<React.SetStateAction> 时，如何定义 setState 的类型<string>？

Question

我有一个带有输入元素的ReactDatePicker组件。为了处理onChange事件，我定义了onChangeHandler函数。但是，当我想定义作为onChangeHandler参数传递的所有函数的类型时，我得到以下错误:

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

当我将函数定义为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

Answer 1

你应该将IDatePickerProps中的setValue类型设置为:

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

或者将onChangeHandler中的setValue更改为:

setValue: (value: string) => void;

Answer 2

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

你需要找出哪种类型是你的数据，并改变它，而不是任何

Answer 3

我对此的解决方案(我认为它更可读):
在IDatePickerProps

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