airbnb/reagieren-Daten eingestellt blockiert Tage nach api

Question

Bibliothek holen: https://github.com/airbnb/react-dates

Frage: Ist möglich blockiert Tage nach vom Server holen zu setzen? (warte/rufe isDayBlocked zurück oder initialisiere den Kalender neu)

Problem: Callback 'isDayBlocked' wird aufgerufen, nachdem der Kalender den nächsten Monat anzeigt, wenn die Daten noch nicht fertig sind.

Beispielcode:

import { DayPickerSingleDateController } from 'react-dates'; 

class DayPicker { 

    isDayBlocked(day) { 
    return this.days.has(day); 
    } 

    handleMonthChange() { 
    // async api fetch 
    this.days = getNextMonthBlockedDays(); 
    } 

    render() { 
    <DayPickerSingleDateController 
     {...someProps} 
     isOutsideRange={this.isOutsideRange} 
     onNextMonthClick={this.handleMonthChange} 
    /> 
    } 

} 

Was ich versucht:

• mount/unmount Kalender je nach Ladestütze (Problem - Animation zum nächsten Monat vor nextMount Rückruf + als Kalender verschwinden sieht schlecht aus)

• laden, um nextMonth Daten zu speichern, also wenn ich Sicht auf nextMonth ändere ‚IsDayBlocked‘ funktioniert gut und holen Daten für nextmonth (Problem - Doppelklick auf Änderung oder nextmonth langsame Verbindung)

Irgendwelche Ideen bitte?

Answer 1

Wenn Sie Ihre Daten im Status halten, wird das Problem behoben und die Ansicht jedes Mal aktualisiert.

handleMonthChange() { 
    // async api fetch 
    getNextMonthBlockedDays().then((data) => { 
     this.setState({days : data}); 
    }); 
    } 

Sie können auch ein Flag setzen, nicht in der Lage sein, den Monat zu ändern, während ein Anforderungsverarbeitung ist oder Sie können die vorherige Anfrage abzubrechen. (Wenn Ihre Fetch API eine Löschung implementiert).