为什么组件不会在通过 $.ajax 成功获取数据后重新呈现？

如何解决为什么组件不会在通过 $.ajax 成功获取数据后重新呈现？

我有以下 mobx 商店：

import $ from 'jquery';
import { observable,action,computed,reaction } from 'mobx';

class AvailabilityCallendar {

  public function __construct(){

  }

  @observable selected_date = new Date();
  @observable max_persons = 2;
  @observable loading = false;
  @observable availableDates = null; // initial value,it may be any valid js value.

  async getAvailableDate() {
    $.ajax({
      url:
        createUrl('/calendar/availability') +
        'persons=' +
        this.max_persons +
        '&' +
        selected_date.format('yy-m-d'),type: 'GET',beforeSend: function () {
        this.loading = true;
      },success: function (data) {
        this.availableDates = data 
        this.loading = true;
       },fail: function (jqXHR,textStatus,errorThrown) {
        this.loading = false;
        console.error('Error: ' + errorThrown + ',Status: ' + textStatus);
      },});
  }
}

我还有以下组件：

import { Component } from 'react';


class Widget extends Component
{
   render(){

     const {availableDates} from this.props.state;

     return (
       <Callendar dates={availableDates} />
     )
   }
}

Callendar 是以下组件：

import { Component } from 'react';


class Callendar extends Component
{
   render(){

     console.log("CALLENDAR",this.props.dates);   

     return (
       {
        this.props.dates.map(day => <div> {date} </div>)
       }
     );
   }
}

尽管 ejax 调用返回数据，但 console.log 返回一个空数组。你知道为什么会这样吗？

console.log 输出如下：

CALLENDAR 
Object { … }

"$mobx": Object { array: {…},owned: false,lastKNownLength: 0,… }

array: Object { … }

atom: Object { name: "AvailabilityCallendar@14.availableDates",isPendingUnobservation: false,isBeingObserved: false,… }

diffValue: 0

isBeingObserved: false

isPendingUnobservation: false

lastAccessedBy: 0

lowestObserverState: -1

name: "BookingAddStore@14.daysToShowToCallendar"

observers: Array []

observersIndexes: Object {  }

<prototype>: Object { onBecomeUnobserved: onBecomeUnobserved(),onBecomeObserved: onBecomeObserved(),isMobXAtom: true,… }

enhancer: function enhancer(newV,oldV)

lastKNownLength: 0

owned: false

values: Array []

length: 0

<prototype>: Array []

<prototype>: Object { dehanceValue: dehanceValue(value),dehanceValues: dehanceValues(values),intercept: intercept(handler),… }

<prototype>: Object { … }

ajax 响应如下：

[
  {
    date: '2021-12-02',available: true
  },{
    date: '2021-12-03',...
]

响应头也包含：

Content-Type: application/json