React useEffect Typescript问题:多个返回类型

Question

我有一个get函数，根据URL获取数据，产品或用户数据:

export type TGet = (path: string) => Promise<IProduct[]> | Promise<IUser>
export const get: TGet = (path: string) => {
return fetch("https://" + window.location.hostname + ":4001/" + path, {
method: "GET",
credentials: "include",
mode: "cors",
headers: {
"Content-Type": "application/json"
}
}).then(r => {
return r.json();
});
};

当产品组件加载时，我使用useEffect获取产品数据:

const Product = ({ match }: RouteComponentProps<TParams>) => {
const [product, setProduct] = useState<IProduct[]>([]);
const content = () => {
if (product.length === 0) {
return <div>loading data...</div>;
}
return <div>{JSON.stringify(product)}</div>;
};
useEffect(() => {
get(`api/fixture/products/${match.params.id}`).then((productData) => {
setProduct(productData);
});
}, [match.params.id]);
return content();
};

这里的问题是setProduct行:

类型为'IProduct[] | IUser'的实参不能赋值给形参类型'SetStateAction<IProduct[]>'。类型'IUser'不可分配键入"SetStateAction<IProduct[]>"。类型'IUser'不能分配给类型'(prevState: IProduct[]) =>IProduct[]"。类型'IUser'没有匹配签名'(prevState: IProduct[]): IProduct[]'。TS2345

我的意思是我知道setProduct不能用Userdata更新，但是因为我在函数类型TGet中说返回值可以是productList或Userdata，我假设TS不会试图强迫Userdata进入匹配这里。告诉Typescript:是的，函数可以返回userdata，但是在这个useState调用的实例中，它肯定是一个productList，正确的方式是什么?

Answer 1

如果您的问题是指您的状态可以是IUser[]或IProduct[]。然后使用useState<IProduct[] | IUser[]>([])

如果你有一些你100%确定的数据，例如IUser[]，你可以在代码中为IProduct使用return data as IUser[]和data as IProduct[]

希望这能解决你的问题

Answer 2

多亏了这些评论，我才能用

解决这个问题。

setProduct(productData as IProduct[]);