[英]How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
I have a React DatePicker component with an input element.我有一个带有输入元素的 React DatePicker 组件。 In order to handle the onChange event I have onChangeHandler function defined.
为了处理 onChange 事件,我定义了 onChangeHandler function。 However, when I want to define the types of all the functions passed down as parameters in the onChangeHandler I get the following error:
但是,当我想在 onChangeHandler 中定义作为参数传递的所有函数的类型时,出现以下错误:
Argument of type '(value: string) => void' is not assignable to parameter of type 'Dispatch'.
'(value: string) => void' 类型的参数不可分配给'Dispatch' 类型的参数。 Types of parameters 'value' and 'value' are incompatible.
参数 'value' 和 'value' 的类型不兼容。 Type 'SetStateAction' is not assignable to type 'string'.
类型“SetStateAction”不可分配给类型“字符串”。 Type '(prevState: string) => string' is not assignable to type 'string'.ts(2345
类型 '(prevState: string) => string' 不可分配给类型 'string'.ts(2345
This error disappears when I define the function as "any" but ofcourse we dont want any in the code:).当我将 function 定义为“任何”时,此错误消失,但我们当然不希望代码中有任何内容:)。
Below is my setup.下面是我的设置。 I have an input component named Datepicker in my main app that has gets a state from the main app.
我的主应用程序中有一个名为 Datepicker 的输入组件,它从主应用程序中获取了 state。
const [value, setValue] = useState('');
const [value, setValue] = useState('');
It gets passed down as props in to a DatePicker component as such:它作为道具传递给 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>
);
The DatePicker component looks something like this: 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>
</> );};
Here is how the onChangeHandler is defined and setValue is used:以下是 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;
You should set type of setValue inside IDatePickerProps to:您应该将 IDatePickerProps 中的 setValue 类型设置为:
setValue : React.Dispatch<React.SetStateAction<string>>
Or change setValue inside onChangeHandler to:或者将 onChangeHandler 中的 setValue 更改为:
setValue: (value: string) => void;
My solution for this (I think it is more readable):我对此的解决方案(我认为它更具可读性):
In the IDatePickerProps在 IDatePickerProps
setValue: (setValueFunc: (value: string) => void) => void;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.