Este es un problema que me acuerdo que me ocurrió el año pasado y no consigo acordarme como lo solucioné. Estoy seguro que es algo relativamente sencillo pero no acabo de sacar como solucionarlo.
Básicamente tengo una función que añade un objeto al estado del componente de React. "El problema" es que dentro de la misma función a continuación tengo una llamada a una API Rest, que envía el objeto entero que se encuentra en el estado recientemente actualizado (se que no es codigo limpio juntar dos cosas diferentes en una misma función, pero no se me ocurre como hacer que una form en react dispare dos funciones diferentes que responden a un evento onClick a la vez, con lo cual tengo ambas cosas en la misma función).
Básicamente cuando consulto la Base de datos dónde debería estar el objeto actualizado, siempre le falta el último item añadido.
Esta es la función:
state = {
new_site: "",
user_sites: [],
}
addSite = (event) => {
event.preventDefault();
let itemsCounter = this.state.user_sites.length +1;
// LOCAL:
const newSite = this.state.new_site;
Geocode.fromAddress(newSite).then(
response => {
const { lat, lng } = response.results[0].geometry.location;
this.setState(prevState => ({
user_sites: [{ "name": newSite, "id": itemsCounter, coordinates: [lat, lng] }, ...prevState.user_sites]
}))
console.log(this.state.user_sites)
},
error => {
console.error(error);
}
);
// API REST
axios.patch('https://c6t66n8v7.execute-api...', {
email: this.state.current_user,
sites: this.state.user_sites,
}).then((res) => {
console.log('Sitio añadido en bbdd')
}).catch(err => console.log(err))
}
render(){
return (
<Container className="add-container">
<Form onSubmit={this.addSite}>
<h4>Añade un sitio </h4>
<Row>
<Form.Control type="text" onChange={this.onChangeNewSite} value={this.state.new_site} placeholder="ejemplo: Madrid, New York...etc" />
</Row>
<Row>
<Button variant="primary" type="submit" variant="success">Añadir</Button>
</Row>
</Form>
</Container>
)
}