Реагируйте: Использование .map не будет отображать никаких данных

Question

Я использую ядро ​​asp. net и реагирую на проект. Все происходит в Visual Studio. Я звоню на сервер, чтобы принести какое-то назначение (это работает, я проверил с помощью отладчика, и у меня есть элемент), но моя проблема заключается в том, когда я пытаюсь отобразить имя доставленного элемента.

{this.state.appoinmentList.map(emp => emp.Name)} , 

здесь проблема. Приложение открывается, но оно не отображает имя, а с отладчиком при наведении курсора на «emp» оно показывает:

«emp не определен» и «ReferenceError: emp не определен»

Как я могу решить проблему? Спасибо.

import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { RouteComponentProps, withRouter } from 'react-router';
import { connect } from 'react-redux';
import { Ajax } from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { Data } from '@syncfusion/ej2-schedule/src/schedule/actions/data';

interface ScheduleDataState {
    appoinmentList: ScheduleData[],
    loading: boolean;
    value: string     
}

export default class Scheduler extends React.Component<RouteComponentProps<{}>, ScheduleDataState>  {
    constructor() {
        super();
        this.state = { appoinmentList: [], loading: true, value: "yes" };
         fetch('api/Schedule/GetAll')
            .then(response => response.json() as Promise<ScheduleData[]>)
            .then(data => {
                this.setState({ appoinmentList: data, loading: false,value: "yes" });
          });  
    }

    render() {          
        return <p>
            {this.state.appoinmentList.map(emp => emp.Name)}
            { this.state.value }          
            </p>   

    }
}

export class ScheduleData {
    Id: number = 0;
    Name: string = "";
    SecondName: string = "";
    DateStart: string = "";
    DataStop: string = "";
    Notes: string = "";
    Status: string = "";

}

Answer 1

Вы должны переместиться fetch() с constructor на componentDidMount

---

        constructor() {
          super();
           this.state = { appoinmentList: [], loading: true, value: "yes" };
          }

        componentDidMount() {
           fetch('api/Schedule/GetAll')
            .then(response => response.json() as Promise<ScheduleData[]>)
             .then(data => {
                this.setState({ appoinmentList: data, loading: false,value: "yes" });
          });
         }