Javascript ajax之后的反应和引导模式渲染

当我单击按钮、调用Ajax jquery并更新列表（this.state.arrPizzas）时需要它。 我试图将它插入componentDidMount函数，但它没有更新。 基本上，在调用getPizzas函数时，您应该更新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;

类CardapioPizza扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 阿里皮扎：“伊尼西奥” } this.getPizza=this.getPizza.bind（this）； } componentDidMount（）{ console.log（“componentDidMount CardapioPizza”）； } getPizza（）{ $.ajax({ url:window.location.href+“/pizzas”， 类型：“POST”， 数据：{size:7} }).完成（功能（否）{ 这是我的国家({ arrPizzas:Math.random（） }); $（#mCardapioPizza”）.modal（“show”）； }); } render（）{ 返回( 埃斯科拉萨博雷斯比萨饼 &时代； {this.state.arrPizzas} 诱捕者 ) } } 导出默认CardapioPizza；

---

您处于反应状态。。。为什么不试试

axios

或

fetch

而不是

$.ajax

，因为我在jquery中有一个遗留代码。jQueryAjax在这个项目中是优先考虑的。您在控制台中看到了什么错误？也许你会看到“

this.setState

不是一个函数”？在第一次渲染后，不会更新更多。。。Var this.state.arrPizzas not update…虽然这并不能回答我的问题，但您能否添加当前调用

getPizza

函数的位置？