带有React js的asp.net核心

Question

我在asp.net核心中使用react js。这是我的模特：

public class NiveauEtude
{
    public Guid Oid { get; set; }
    public string Niveau { get; set; }
    public string Libelle { get; set; }
    public virtual IList<Filiere> Filiere{get; set;}
}

public class Filiere
{
    public Guid Oid { get; set; }
    public string Libelle { get; set; }
    public int Ordre { get; set; }
    public Guid? NiveauEtudeId { get; set; }

    [ForeignKey("NiveauEtudeId")
    [Display(Name = "NiveauEtude")]
    public virtual NiveauEtude NiveauEtude{get;set;}
}

这是我的文件FetchFiliere.tsx：

import * as React from 'react'; 
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';

interface FetchFiliereDataState {
empList: FiliereData[];
loading: boolean;
}
export class FetchFiliere extends React.Component<RouteComponentProps<{}>, 
FetchFiliereDataState> {
constructor() {
    super();
    this.state = { empList: [],loading: true };


    fetch('api/Filiere/Index')
        .then(response => response.json() as Promise<FiliereData[]>)
        .then(data => {
            this.setState({ empList: data, loading: false });
        });


}

public render() {
    let contents = this.state.loading
        ? <p><em>Loading...</em></p>
        : this.renderFiliereTable(this.state.empList)

   return <div>
        <h1>Filiere Data</h1>
        <p>This component demonstrates fetching Filiere data from the server.</p>
        <p>
            <Link to="/addFiliere">Create New</Link>
        </p>
        {contents}
    </div>;
}

///将HTML表返回到render（）方法。

private renderFiliereTable(empList: FiliereData[]) {
    return <table className='table'>
        <thead>
            <tr>
                <th></th>
                <th>FiliereId</th>
                <th>Libelle</th>
                <th>Ordre</th>
                <th>NiveauEtude</th>
            </tr>
        </thead>
        <tbody>
            {empList.map(emp =>
                <tr key={emp.oid}>
                    <td></td>
                    <td>{emp.oid}</td>
                    <td>{emp.libelle}</td>
                    <td>{emp.ordre}</td>
                    <td>{emp.niveauEtude.niveau}</td>
                </tr>
            )}
        </tbody>
    </table>;
}


 }

-

   export class FiliereData {
    oid: string = "";
    libelle: string = "";
    ordre: number = 0;
    niveauEtude: NiveauEtude = new NiveauEtude;
   } 

   export class NiveauEtude {
    oid: string = "";
    libelle: string = "";
    niveau: string = "";
   } 

因此，当我要显示niveauEtude.niveau时，它说无法读取未定义的属性“ niveau”。

如何使用react js获得niveauEtude Objet？ 任何帮助或文件。 谢谢：）