javascript - React接口(interface):Promise有效，但对象仍“未定义”

我有一个简单的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＃视图模型返回：

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

最佳答案

您的this.state对象有一个companyData对象，并且您正在尝试访问CompanyData（大写C），但是javascript区分大小写，因此需要将其小写：

错误：

this.state.creditData!.CompanyData!

对：

this.state.creditData!.companyData!