[英]How to fix React TypeScript error: Argument of type '""' is not assignable to parameter of type 'SetStateAction<undefined>'
I am working on a React app that was pulled from a live server and I'm trying to run it locally.我正在开发一个从实时服务器中提取的 React 应用程序,我正在尝试在本地运行它。 When I start it up I get this error:
当我启动它时,我收到此错误:
Argument of type '""' is not assignable to parameter of type 'SetStateAction'.
'""' 类型的参数不能分配给 'SetStateAction' 类型的参数。 TS2345
TS2345
75 | onClick={(): void => { 76 | if (regulatoryListActiveId === key) { 77 | setregulatoryListActiveId(""); | ^ 78 | } else { 79 | setregulatoryListActiveId(key); 80 | }
Here is my code:这是我的代码:
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { useState } from "react";
const ChemicalRegulatoryListFilter = (props: any) => {
const {
chemicalRegulatoryList,
setChemicalRegulatoryList,
noOfRegulatoryListSelected,
setNoOfRegulatoryListSelected,
errorMessage,
setErrorMessage,
selectedValues,
setSelectedValues,
setIsSearchClicked,
} = props;
const [regulatoryListActiveId, setregulatoryListActiveId] = useState();
const toggleRegulatoryListItem = (
parentIndex: number,
childIndex: number
) => {
const regulatoryList = [...chemicalRegulatoryList];
const isSelected =
regulatoryList[parentIndex].subItems[childIndex].selected;
if (!isSelected) {
if (noOfRegulatoryListSelected === 10) {
const error = { ...errorMessage, showMaxLimitMessage: true };
setErrorMessage(error);
return;
}
regulatoryList[parentIndex].selected = true;
regulatoryList[parentIndex].noOfSelected += 1;
setNoOfRegulatoryListSelected(noOfRegulatoryListSelected + 1);
selectedValues.push({
name: "regulatory",
itemLabel: regulatoryList[parentIndex].itemLabel,
itemValue: regulatoryList[parentIndex].itemValue,
noOfSelected: regulatoryList[parentIndex].noOfSelected,
parentIndex,
childIndex,
subItemsItemLabel:
regulatoryList[parentIndex].subItems[childIndex].itemLabel,
subItemsItemValue:
regulatoryList[parentIndex].subItems[childIndex].itemValue,
});
} else {
regulatoryList[parentIndex].noOfSelected -= 1;
setNoOfRegulatoryListSelected(noOfRegulatoryListSelected - 1);
const error = { ...errorMessage, showMaxLimitMessage: false };
setErrorMessage(error);
const newSelectedValues = selectedValues.filter((obj: any) => {
return (
obj.subItemsItemValue !==
regulatoryList[parentIndex].subItems[childIndex].itemValue
);
});
setSelectedValues(newSelectedValues);
}
regulatoryList[parentIndex].subItems[childIndex].selected = !isSelected;
setChemicalRegulatoryList(regulatoryList);
};
if (chemicalRegulatoryList !== undefined) {
return (
<div className="chemical-toxicity-filter">
<div className="title">REGULATORY LISTS</div>
<ul className="filter">
{chemicalRegulatoryList.map((item: any, key: number) => (
<li
key={`item-${key}`}
className={`${
regulatoryListActiveId !== key ? "collapsed" : ""
} ${item.noOfSelected > 0 ? "selected" : ""}`}
onClick={(): void => {
if (regulatoryListActiveId === key) {
setregulatoryListActiveId("");
} else {
setregulatoryListActiveId(key);
}
}}
>
{item.itemLabel}
<ul>
{item.subItems.map((subItem: any, innerKey: number) => (
<li
key={`item-${innerKey}`}
className={`${subItem.selected ? "selected" : ""}`}
onClick={(e): void => {
setIsSearchClicked(false);
e.stopPropagation();
toggleRegulatoryListItem(key, innerKey);
}}
>
{subItem.itemLabel}
</li>
))}
</ul>
</li>
))}
</ul>
</div>
);
}
return <></>;
};
export default ChemicalRegulatoryListFilter;
After reading similar questions on stackoverflow I have tried changing this:在阅读了有关 stackoverflow 的类似问题后,我尝试更改此内容:
const [regulatoryListActiveId, setregulatoryListActiveId] = useState();
to this:对此:
const [regulatoryListActiveId, setregulatoryListActiveId] = useState<string>();
That seems to fix the initial error but then this error happens:这似乎解决了最初的错误,但随后发生了这个错误:
This condition will always return 'true' since the types 'string |
此条件将始终返回 'true',因为类型 'string | undefined' and 'number' have no overlap.
undefined' 和 'number' 没有重叠。 TS2367
TS2367
72 | key={`item-${key}`} 73 | className={`${ 74 | regulatoryListActiveId?== key: "collapsed". "" | ^ 75 | } ${item?noOfSelected > 0: "selected": ""}`} 76 | onClick={(): void => { 77 | if (regulatoryListActiveId === key) {
Anyone know how solve this?有谁知道如何解决这个问题? Thanks!
谢谢!
It looks like you want the state value to be a number , since you're doing:看起来您希望 state 值为number ,因为您正在执行以下操作:
setregulatoryListActiveId(key);
and key
is the index of the element being iterated over. key
是被迭代的元素的索引。
Including undefined
in the type might cause a bit of unnecessary confusion too - if I were you, I'd change the definition to:在类型中包含
undefined
也可能会引起一些不必要的混淆 - 如果我是你,我会将定义更改为:
const [regulatoryListActiveId, setregulatoryListActiveId] = useState(-1);
and change和改变
setregulatoryListActiveId("");
to至
setregulatoryListActiveId(-1);
to clear it (since no array index will be equal to -1).清除它(因为没有数组索引等于-1)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.