javascript - React.Dispatch 时如何为 setState 函数定义 TypeScript 类型> 不接受?
问题描述
我有一个带有输入元素的 React DatePicker 组件。为了处理 onChange 事件,我定义了 onChangeHandler 函数。但是,当我想在 onChangeHandler 中定义作为参数传递的所有函数的类型时,出现以下错误:
'(value: string) => void' 类型的参数不可分配给'Dispatch' 类型的参数。参数 'value' 和 'value' 的类型不兼容。类型“SetStateAction”不可分配给类型“字符串”。类型 '(prevState: string) => string' 不可分配给类型 'string'.ts(2345
当我将函数定义为“任何”时,这个错误就会消失,但我们当然不希望代码中有任何:)。
下面是我的设置。我的主应用程序中有一个名为 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;
推荐阅读
- c# - 如何将分组添加到复杂的 linq 查询?
- python - 如何在 python 中将 16 位十六进制和二进制表示形式转换为十进制浮点数(反之亦然)?
- sql - 在 PostgreSQL 中选择不同的窗口函数
- jestjs - 笑话:如何模拟一个深层对象?
- html - 在 td 内截断跨度
- google-apps-script - 我无法编辑 propertiesService
- codenameone - 如何不处理组件派生中的指针事件
- c - 这是在文本文件中跳过一行的正确方法吗?
- mysql - 如何在 GROUP BY 的结果中添加一个额外的列,其值与条件匹配?
- regex - 删除 perl 字符串中所有前导零的最优雅和最快的方法