Reactjs 类型脚本条件呈现，类型'；未定义'；不可分配给类型CompanyStatsProps

有人能帮我调试typescript的问题吗

问题是我有一些功能组件，其中道具设置为特定类型

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>
            );
        }

我是新手，不知道如何处理这种条件渲染

---

注：CompanyStats（state）是在用户搜索和API调用时更新的，代码中没有包含该语句或其他语句，因为我认为它们对调试没有用处。提前感谢

简短回答：写下这个

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

详细回答：当您将companyStats的类型设置为CompanyStatsProps时，您告诉typescript将始终定义companyStats。它永远不可能是未定义的。因此，当您将未定义的赋值给它时，它显示了一个错误。所以通过写作

companyStats?: CompanyStatsProps | undefined;

---

您正在告诉typescript，它可以是未定义的，也可以是CompanyStatsProps。

如果您想将

companyStats

属性设置为

未定义的
属性，则需要初始化
CompanyStatsProps
接口的属性。例如，我假设
CompanyStatsProp
有两个属性
id
和
name

state={companyStats:{id:undefined，name:undefined}，errorMessage:undefined}
什么是
CompanyStatsProps
？它是一个类还是一个接口？它是一个接口标签描述问题的内容。如果问题不是关于角度的，那么使用[Angular]标记是不合适的。就这么简单。我对ReactJS了解不够，不知道问题是否真的与此有关。如果是，那么标签就可以了。如果这只是一个Typescript语言问题，那么您也不需要[reactjs]标记。不，它无法编写companyStats？：CompnayStatsProp相当于CompnayStatsProp |未定义，“”符号表示可选。问题在子组件中，它不是可选的，因此如果在父组件中我将其设置为“？”TS认为它可能未定义，但是它不能像我处理的IF语句一样，但是TS不知道这一点，并抛出一个错误。我已经定义了状态，这样一个属性将是X类型，或者将是未定义的，如果属性未定义，组件将不会被呈现。如果在初始化时没有将companyStats设置为undefined，而是将其设置为companyStats:{id:undefined，name:undefined}，则必须添加更多检查。如果我在将来添加更多的道具，即CompanyEmployeesDetails，它将通过用户搜索进行的API调用进行更新，那么我还必须添加对这些道具的检查。
companyStats?: CompanyStatsProps | undefined;