React接口:Promise有效但对象仍未定义"未定义"

时间:2018-03-03 14:34:10

标签: javascript asp.net-mvc reactjs typescript

我有一个简单的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是正确无误的。当我将它悬停在调试模式时,我甚至可以看到我想要的值:

enter image description here

但在我看来,companyData对象是&#34;未定义&#34;,尽管它在之前的图像中起作用:

enter image description here

现在,我能看到的唯一区别是,一个是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; }
}

0 个答案:

没有答案