TransWikia.com

Cargar datos al renderizar un componente

Stack Overflow en español Asked by Mariana on November 30, 2020

tengo una duda, cómo podría hacer que carguen los datos de localStorage en estados al renderizar un componente. Tengo una vista llamada MainForm donde se ejecuta una función que guarda los datos en firebase y posteriormente guarda el uid y la data en localStorage

    const saveData = () => {
        db.collection('user').add({
            brand: brand.brand,
            city: selectedCity,
            model: model.model,
            timestamp: Date.now()
        })
        .then((docRef) => {
            localStorage.setItem('docRef', docRef.id)
            console.log("Document written");
        }).then(() => {
            const getRef = localStorage.getItem('docRef')
            db.collection("prospects").doc(getRef).onSnapshot(function(doc) {
                localStorage.setItem('data', JSON.stringify(doc.data()))
            })
        })
        .catch((error) => console.error("Error adding document: ", error));
    }

después pasa a otro componente llamado Rates en el que quiero que cargue los datos de localStorage en estados para poder renderizar el contenido, lo estoy haciendo de este modo:

    useEffect(() => {
        const getRef = localStorage.getItem('docRef')
        setDocRef(getRef)
        const getData = localStorage.getItem('data')
        const parseData = JSON.parse(getData)
        setData(parseData)
    }, [])

pero no renderiza porque no obtiene los datos, y en la consola primero me aparecen los console.log de Rates, y hasta después de esos me sale el del MainForm

introducir la descripción de la imagen aquí

Alguien podría ayudarme para saber qué es lo que puedo hacer o qué estoy haciendo mal?
Muchas gracias.

One Answer

Para hacer la redirección a /planes dentro de tu función saveData() puedes hacerlo utilizando el HOC withRouter del paquete react-router-dom.

Por ejemplo:

import { withRouter } from 'react-router-dom'

const App = (props) => {
    const { history } = props

    const saveData = (e) => {
        e.preventDefault() // para que no recargue la página

        // tu código de saveData()

        history.push('/planes')
    }

    return <button onClick={saveData}>Guardar datos</button>
}

export default withRouter(App)

Es necesario que tengas instalado el paquete react-router-dom.

Correct answer by Gabri on November 30, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP