如何在react typescript中传递尽可能多的prop函数(useState([])， useState(boo

Question

API结构

{
"default": [
{
"id": 1,
"name": "A"
},
{
"id": 2,
"name": "B"
},
{
"id": 3,
"name": "C"
},
]
}

我想在子组件中处理许多道具…

许多道具的例子是useState([])， useState(boolean)

export interface iItemListProps {
id: number;
name: string;
}
export interface iDepth {
depth: boolean;
}
function App() {
const [itemList, setItemList] = useState([]);
const [depth, setDepth] = useState(false);
useEffect(() => {
fetch("API URL")
.then((res) => res.json())
.then((res) => {
setItemList(res);
});
}, []);
return (
<div className="wrap">
<ul className="tabList">
<li className="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div className="listContainer">
<Product itemList={itemList} {...depth} />
</div>
</div>
);
}

component itemList error is

类型'never[]'不能赋值给类型'[{id: number;名称:字符串;}]"。目标需要1个元素，但源可能更少。

App.tsx

type iItemListProps = {
itemList: [
{
id: number;
name: string;
}
];
depth: boolean;
};
const Product: React.FunctionComponent<iItemListProps> = ({
depth,
itemList,
}) => {
console.log(depth);
return (
<div className="weekly">
<p className="title">이번주 채소</p>
{itemList.map((item) => (
<span key={item.id} className="item">
{item.name}
</span>
))}
<Allergy />
</div>
);
};

请告诉我是否有好的方法.....

Answer 1

问题在于:const [itemList, setItemList] = useState([]);这里你是用一个空数组初始化状态，而不是用itemList类型初始化状态，itemList类型是一个对象数组。

这样做:

const [itemList, setItemList] = useState([{id: 0; name: '';}]);

或

const [itemList, setItemList] = useState([{}]);

同样，如果在你的状态中没有值，并将它与map一起使用，可能会导致这样的问题。

在App.tsx中使用&&条件，以便它只在itemList中有数据时才执行。

{itemList && itemList.map((item) => (
<span key={item.id} className="item">
{item.name}
</span>
))}

Answer 2

您需要指定useState处理的类型，例如:

useState<IItemListProps>([]);
/**
IItemListProps = {
id: number;
name: string;
}[]
*/

您可以这样做，因为useState签名

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

发生错误，因为[]类型默认推断为never[]

Answer 3

必须提到useState中的类型。例如:

const [itemList, setItemList] = useState<iItemListProps[]>([]);

或者必须在useState中给出初始状态。例如:

const [itemList, setItemList] = useState([{}]);
Or
const [itemList, setItemList] = useState([{id: 0, name: 'name'}]);

希望问题解决了:)