React useEffect Typescript问题：多种返回类型答案

【问题标题】：React useEffect Typescript problem: multiple return typesReact useEffect Typescript问题：多种返回类型
【发布时间】：2021-11-01 18:50:18
【问题描述】：

我有一个获取数据的函数，可以根据 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 line：

'IProduct[] 类型的参数 | IUser' 不可分配给参数 'SetStateAction' 类型。类型“IUser”不可分配键入“SetStateAction”。类型 'IUser' 不可分配给类型 '(prevState: IProduct[]) => IProduct[]'。类型“IUser”不匹配签名“(prevState: IProduct[]): IProduct[]”。 TS2345

我的意思是我知道 setProduct 不能用 Userdata 更新，但是因为我在函数类型 TGet 中说返回值可以是 productList 或 userdata，所以我假设 TS 不会尝试强制 userdata 进入在这里匹配。告诉 Typescript 的正确方法是什么：是的，该函数可以返回用户数据，但是在这个 useState 调用的实例中，它肯定是一个产品列表吗？

【问题讨论】：

尝试添加到你的状态 useState([])
TypeScript 不知道 Ajax 调用的返回类型。您可以使用“as”运算符将响应对象类型转换为预期类型，例如productData 作为 IProduct[];

标签： reactjs typescript

【解决方案1】：

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

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

希望这能解决你的问题

【讨论】：

【解决方案2】：

感谢 cmets 我能够解决这个问题

setProduct(productData as IProduct[]);

【讨论】：

好像我来晚了 :D 很好，很高兴你解决了你的问题 :)