0

En mi codigo hay una form que recoge un valor que ingresa el usuario llamado name. Al enviar esta form se ejecuta una función (addMarkUp()) que añade lo que sea que es name al state del componente. Después de esto hay otra función (updateDynamo()) que con la información recientemente añadida al state, envía estos datos a una base de datos.

export default class AddSite extends Component {
    state = {
        new_location: "",
        new_site: "",
        view_location: [42.600273, -5.572582],
        user_sites: [],
        zoom: 2,
        current_user: ""
    }

    updateDynamo = () => {
        axios.patch(`${apiGatewayDevStage}/add-site`, {
            email: this.state.current_user,
            sites: this.state.user_sites,
        }).then((res) => {
            console.log('DB en Dynamo actualizada')
        }).catch(err => console.log(err))

    }
    addMarkUp = (event) => {
        event.preventDefault();
        let itemsCounter = this.state.user_sites.length + 1; 
        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]
                }))
                this.updateDynamo()
            },
            error => { console.error(error); }
        );
    }
    async deleteSite(id) {
        await this.setState({
            user_sites: this.state.user_sites.filter(function (item) {
                return item.id !== id
            })
        })
        this.updateDynamo()
    }
    // Conversor nombre a coordenadas
    geoCodeToCoordinates = (event) => {
        event.preventDefault()
        const newAdress = this.state.new_location;
        Geocode.fromAddress(newAdress).then(
            response => {
                const { lat, lng } = response.results[0].geometry.location;
                this.setState({
                    view_location: [lat, lng],
                    zoom: 6
                })
            },
            error => {
                console.error(error);
            }
        );
    }
     // recoger datos en la form al state
    onChangeNewLocation = event => {
        this.setState({
            new_location: event.target.value
        })
    };
    onChangeNewSite = event => {
        this.setState({
            new_site: event.target.value
        })
    };
    render() {
        return (
            <div className="addsite-container">
                <Container>
          
                        {/** AÑADIDOR SITIOS */}
                        <Col className="p-0">
                            <Container className="add-container">
                                <Form onSubmit={this.addMarkUp}>
                                    <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 type="submit" variant="success">Añadir</Button>
                                    </Row>

                                </Form>
                            </Container>
                            <ListGroup>
                                {this.state.user_sites.map((site, i) => (
                                    <div key={i} className="added-items-container">
                                        <ListGroup.Item className="added-items" variant="warning" >{site.name}</ListGroup.Item>
                                        <Button onClick={this.deleteSite.bind(this, site.id)}>Quitar</Button>
                                    </div>
                                ))}

                            </ListGroup>
                        </Col>
                    </Row>

                </Container>
            </div>
        )
    }
}

Pero he tenido que añadir otra función más (insertPicture()) porque necesito que se busque una foto online relacionada con el nameque se ha recogido en la form. Necesito tener la respuesta de esta función, que conecta con una API de fotos online, para que cuando addMarkUp() se ejecute, también tenga disponible el valor url correspondiente al name para añadirlo al state.

insertPicture(site) {
        pexelsClient.search(site, 1, 1)
            .then(function (result) {
                console.log(result);
            })
            .catch(function (e) {
                console.err(e);
            });
    }

Es decir, pienso que para hacer funcionar esto necesitaría tener el siguiente order de ejecución:

1 Primero: insertPicture() 2 Segundo: addMarkUp() 3 Tercero: updateDynamo()

El problema es que he probado a hacerlo de la siguiente manera y parece que no es la apropiada:

addMarkUp = (async event) => {
        event.preventDefault();
        let itemsCounter = this.state.user_sites.length + 1; 
        const newSite = this.state.new_site;
        // Primero ejecutar esta función:
        await insertPicture(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]
                }))
                this.updateDynamo()
            },
            error => { console.error(error); }
        );
    }

1 respuesta 1

1

Tienes varias formas de afrontar el reto que propones, y aunque, en mi opinión no sería el sitio idóneo de hacer esa lógica en la vist, voy a tratar de ofrecerte una solución al problema que comentas.

Cuando llamas a insertPicture no esperas la respuesta para, entiendo que si necesitas los datos de esa llamada para realizar la siguiente, así debería ser, así podemos devolver una promesa en ese método.

insertPicture quedaría así:

insertPicture = async (site) => { // Sin bind en una clase
   return pexelsClient.search(site, 1, 1)        
}

Ahora en addMarkup donde tienes el await SI te funcionará porque el método ahora devuelve una promesa ( no olvides añadir async al método addMarkup)

const pictureData = await insertPicture(this.state.new_site);

y para el resto de las funciones dependientes haría lo mismo, espero te sirva

Error al añadir una ciudad:

el problema es que estás haciendo uso del this pero ahí no tiene la referencia de la clase.

cambia

addMarkUp(event) {

por

addMarkUp = async (event) => {

y ya lo tienes https://codesandbox.io/s/friendly-lake-mi4cp

8
  • No me deja poner funciones asyincronas usando arrow function, por qué puede ser? Lo he probado haciendo con funciones normales, y me sale el mismo error que ayer. Cuando el código llega a "const pictureData = await insertPicture(this.state.new_site);" salta que (this.state.new_site) es undefined. Básicamente si le quito la arrow funcion y la haga función normal, this.state.new_site salta como undefined. Pero si le pongo la arrow function no me deja ponerle el async el 3 abr. 2020 a las 16:29
  • ¿Puedes montar un sandbox con ejemplo reproducible? el 3 abr. 2020 a las 16:32
  • Si, aquí te lo paso: codesandbox.io/s/aged-sound-jks3v Da algun fallo en la compilación pero si cierras el aviso que sale al cargar, la app funciona. Básicamente es poner una ciudad en la form de la derecha ("Añade un sitio") y pulsar Añadir. Aquí es dónde se rompe si le pongo el arrow function. el 3 abr. 2020 a las 16:53
  • Perfect, voy a verlo el 3 abr. 2020 a las 16:55
  • No sé si ves mis cambios en el tuyo, pero se te rompe porque estás utilizando el .then dentro de insertPicture, prueba a ponerlo como en el ejemplo, aparte de que el mapa se ve entrecortado parece que funciona bien. te dejo el link con eso actualizado: codesandbox.io/s/friendly-lake-mi4cp el 3 abr. 2020 a las 17:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.