Реагировать и Bootstrap Модальный рендеринг после ajax

Question

Мне это нужно, когда я нажимаю кнопку, вызываю Ajax jquery и обновляю список (this.state.arrPizzas). Я пытался вставить его в функцию componentDidMount, но он не обновляется. В основном, при вызове функции getPizza вы должны обновить значение arrPizzas, что не так сегодня

введите код здесь

class CardapioPizza extends Component {    


constructor(props) {
    super(props);        
    this.state = {
        arrPizzas: "Inicio"
    }

    this.getPizza = this.getPizza.bind(this);
}

componentDidMount() {
    console.log("componentDidMount CardapioPizza");       
}

getPizza(){         
    $.ajax({
        url: window.location.href + "/pizzas",
        type: "POST",
        data: { size: 7 }
    }).done(function(retorno){
        this.setState({
            arrPizzas: Math.random()
        });
        $("#mCardapioPizza").modal("show");
    });           
}


render() {


    return(
        <div id="mCardapioPizza" className="modal" tabIndex="-1" role="dialog" data-backdrop="static" aria-labelledby="mCardapioPizza" aria-hidden="true">
            <div className="modal-dialog modal-dialog-centered" role="document">
                <div className="modal-content bg-modal">
                    <div className="modal-header">
                        <h5 className="modal-title fw-700 font-30 color-white modal-title-centralizado">ESCOLHA SABORES DE PIZZA</h5>
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body" id="teste">    
                        { this.state.arrPizzas }
                    </div>
                    <div className="modal-footer border-0">
                        <div className="row w-100">
                            <div className="col-12 p-0">
                                <button type="submit" className={"btn btn-primary btn-lg col-12" }>
                                    <i className="icon-check"></i> ENTRAR
                                </button>    
                            </div>
                        </div>                            
                    </div>

                </div>
            </div>
        </div>
       )       
   }
}

export default CardapioPizza;