Soy nuevo en reaccionar y estoy tratando de almacenar el valor en estado para el cliente. Mi código para obtener el valor del menú desplegable es este:
handleChangeCC = customercode => { this.setState({ customercode }); // var customer = customercode.map(o => o.label); // this.setState({ customer }); var customer1 = customercode.label; this.setState({ customer: customer1 }); console.log(`Option selected1:`, this.state.customer); this.getCustomerName(); // console.log("Rec2:" + document.getElementById("CustomerCode").innerText); };Estoy ejecutando la función this.getCustomerName() en esta función. El código para eso es este:
getCustomerName = () => { var Items = []; var code = this.state.customer; console.log('CustomerCode:' + code); axios.post('https://localhost:44303/api/observation/GetCustomerName?' + '&code=' + code).then(response => { //console.log('Value=' + response.data); console.log('Response=' + response.data); response.data.map(item => { var obj = new Object(); // obj.label = desc; obj.label = item; Items.push(obj); //this.setState({ locations: response.data }); }); this.setState({ customerName: Items }); console.log('customerName:' + this.state.customerName); }); };Estoy configurando code= this.state.customer en la función getCustomerName que estoy ejecutando justo después de this.setState({ customer: customer1 }); en la función handleChangeCC.
Sin embargo, como this.setState es una función asíncrona, no actualiza el estado inmediatamente, por lo que obtengo un código nulo y mi función getCustomerName no funciona.
¿Cómo soluciono esto? ¿Hay alguna manera de llevar el valor variable de una función a otra función? Por favor ayuda
Pasaría el código de customercode a su método getCustomerName() , en este caso. setState tomará un momento, por lo que su valor no estará disponible de inmediato para su método. Tendría que esperar a que el valor esté en estado y luego llamar al método. Al configurar su estado y pasarlo a su método, no tiene que esperar a que se complete la actualización del estado.
Además, si solo está aprendiendo React, buscaría usar componentes basados en funciones en lugar de los componentes de clase heredados, si tiene la opción.
Sí, hay varias técnicas para obtener el último valor.
this.setState({ customerName: Items }, () => { console.log('latest value', this.state.customerName); });El segundo argumento que se puede pasar opcionalmente a setState es una función de devolución de llamada que se llama inmediatamente después de que se completa setState y los componentes se vuelven a representar.
Más aquí
updateA = async () => { this.setState({ a: "test" }); await (() => {})(); // or fetch or any async operation console.log(this.state.a); };Tenga en cuenta que este no es un enfoque recomendado, sin embargo, la versión actual de reaccionar lo admite.