React接口：Promise有效但对象仍然“未定义”

Question

我有一个简单的React应用程序，它调用一个ASP.NET MVC控制器，它返回一个简单的对象（见下文）。我的问题是我不能写值，因为它是未定义的。

我做了以下React接口，它与返回的数据相同：

interface CreditData {
    Description: string;
    RatingData: {
        SummaryRating: number;
        Equity: number;
        Age: number;
        Employees: number;
        Type: number;
        Situation: number;
    };
    CompanyData: {
        VAT: string;
        Name: string;
        Address: string;
        Zipcode: string;
        City: string;
        Phone: string;
        Email: string;
        Startdate: string;
        Enddate: string;
        Employees: string;
    }

}

React类使用的接口是：

interface CompanySearchState {
    loading: boolean;
    query: string;
    creditData: CreditData | null;
    showresult: boolean;
}

我有一个按钮，当我单击按钮时，以下代码运行：

searchVat() {
    this.setState({ loading: true });

    var url = 'api/CreditData/creditrating?query=' + this.state.query;

    fetch(url)
        .then(response => response.json() as Promise<CreditData>)
        .then(data => {
            console.log(data);
            this.setState({ creditData: data, loading: false, showresult: true });
        });
}

现在，我没有在通话中出现任何错误。但是，在我的布局中我遇到了问题。我有以下观点：

return <div><h1>Resultat for {this.state.creditData!.CompanyData!.Name}</h1>
                <div className='row'>
                    <div className='col-md-6'>
                        <h3>Rating</h3>
                        Fra 1-10: {this.state.creditData!.RatingData!.SummaryRating}
                        <h3>Data</h3>
                        {this.state.creditData!.Description}
                    </div>
                    <div className='col-md-6'>
                        <p>Test</p>
                    </div>

                </div>
            </div>

我的挑战如下：this.state是正确和好的。当我将它悬停在调试模式时，我甚至可以看到我想要的值：

但在我看来，companyData对象是“未定义的”，尽管它在之前的图像中起作用：

现在，我能看到的唯一区别是，一个是CompanyData，另一个是companyData。但这对我没有帮助，因为如果我在界面内写一个小的companyData，我会得到另一个错误。

所以我的问题是：我想访问companyData对象，但它是未定义的。我不明白，因为当我悬停this.state时，它在调试器中运行得非常好。

我的C＃viewmodel返回：

public class CreditData
{
    public int Rating { get; set; }
    public string Description { get; set; }
    public CompanyData CompanyData { get; set; }
    public Rating RatingData { get; set; }
}

public class Rating
{
    public int SummaryRating { get; set; }
    public decimal Equity { get; set; }
    public decimal Age { get; set; }
    public decimal Employees { get; set; }
    public decimal Type { get; set; }
    public decimal Situation { get; set; }

}

public class CompanyData
{
    public string VAT { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Zipcode { get; set; }
    public string City { get; set; }

    public string Phone { get; set; }
    public string Email { get; set; }

    public string Startdate { get; set; }
    public string Enddate { get; set; }
    public string Employees { get; set; }

    public bool @protected { get; set; }
    public string Fax { get; set; }
    public string Addressco { get; set; }
    public int Industrycode { get; set; }
    public string Industrydesc { get; set; }
    public int Companycode { get; set; }
    public string Companydesc { get; set; }
    public string Creditstartdate { get; set; }
    public int? Creditstatus { get; set; }
    public bool Creditbankrupt { get; set; }
    public ApiOwners[] Owners { get; set; }
    public ApipPoductionunits[] Productionunits { get; set; }
    public int T { get; set; }
    public int Version { get; set; }
}

Answer 1

你的this.state对象有一个companyData对象，你正在尝试访问CompanyData（使用大写C），但javascript是区分大小写的，所以需要小写它：

错误：

this.state.creditData!.CompanyData!

对：

this.state.creditData!.companyData!