Question

有人可以帮我调试打字稿问题吗？

问题是我有一些将props设置为特定类型的功能组件。

export interface AppState {
    companyStats?: CompanyStatsProps;
    errorMessage?: string;
}

公司统计信息是子组件的道具。仅当companyStats可用时才呈现。

应用程序的初始状态为

state = { companyStats: undefined, errorMessage: undefined };



render() {
        if (this.state.companyStats) {
            return (
                <React.Fragment>
                    <NavBar onSearch={this.handleCompanySearch} />
                    <DashBoard companyStats={this.state.companyStats}/>
                </React.Fragment>
            );
        }

问题是，尽管我已经用if语句处理了未定义的问题，但是打字稿不知道它认为companyStats可能是未定义的，并且引发了错误。

Type 'undefined' is not assignable to type 'CompanyStatsProps'.

我是新来的反应者，我不知道如何处理这种条件渲染。

PS：CompanyStats（状态）在用户搜索和API调用后更新，未在代码中包含该语句或其他语句，因为我认为它们对调试无用。预先感谢

Answer 1

简短答案：代替此文字

export interface AppState {
    companyStats?: CompanyStatsProps | undefined;
    errorMessage?: string;
}

详细答案：：将 companyStats 的类型设置为 CompanyStatsProps 时，您正在告诉打字稿 companyStats 将始终被定义。它永远不能是不确定的。因此，当您为其分配 undefined 时，它会显示错误。因此，通过写

companyStats?: CompanyStatsProps | undefined;

您告诉打字稿它可以是未定义的，也可以是CompanyStatsProps。

Answer 2

如果您想将CompanyStatsProps prop设置为companyStats，则需要初始化undefined接口的props，如下所示。例如，我假设CompanyStatsProp有两个属性id和name

state = { companyStats: { id: undefined, name: undefined }, errorMessage: undefined };

Typescript条件渲染，类型“ undefined”不可分配给CompanyStatsProps类型

2 个答案: