Question

在下面的代码中，我想使用SubscriptionPlan作为视图的模型。
只有将数据对象（以下代码中的变量plans强制转换为any才能使JSX正常工作。
如何使用正确类型的数据对象使JSX工作？谢谢

tsconfig：

   "jsx": "react",

组件：

function Subscriptions() {

    const useFetch = () => {
        var [plans, setPlans] = useState(new Array<SubscriptionPlan>());
        const [loading, setLoading] = useState(true);

        useAsyncEffect(async (isMounted) => {

            if (!isMounted())
                return;

            plans = await GetSubscriptionPlans(); // API call, returns SubscriptionPlan[]
            setPlans(plans)
            setLoading(false);

        }, []);

        return { plans, loading };
    }

    const { plans, loading } = (useFetch())

    if (loading || plans === null || plans.length == 0)
        return (<div>loading...</div>);

    return (
        <div>
            {plans[0].PlanDescription}              // Does not work.
            {(plans as any)[0].planDescription}     // Works.  Note casing of property name.
        </div>
        )
}

型号：

export default class SubscriptionPlan {
    public PlanDescription: string = "";  
    //...   
};

Answer 1

如果End Function有效，但是planDescription无效，则意味着您收到的（实际上是从某些服务器收到的）实际上不是您所得到的。

所以您的类型是错误的，或者服务器发送了错误的消息。

如何在React / Typescript中使用强类型模型？

1 个答案: