0

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.

6
  • ¿Has probado async/await en el método que obtiene los datos de Firebase? Por lo que parece, se está actualizando la página antes de que se obtenga el dato de Firebase, por eso devuelve undefined, después null y, por último, el mensaje. Commented el 18 nov. 2020 a las 7:01
  • Podrías hacer una variable de estado useState() para controlar cuando finaliza la llamada a Firebase. Por ejemplo, const [ isLoading, setIsLoading ] = useState(true). Luego muestras el componente Rates únicamente cuando sea falso (al acabar la llamada haces un setIsLoading(false)).
    – Gabri
    Commented el 18 nov. 2020 a las 7:15
  • Estaba checando lo que tengo y pensé que el problema tal vez es como tengo el botón que ejecuta la función, lo tengo dentro de un Link que envía al siguiente componente: <Link to='/planes'><button onClick={saveData}>COTIZAR</button></Link> hay algún modo en que esto pueda cambiarse si es que esto genera el problema? Lo intenté con History.push('/planes') pero solo me refresca la página
    – OliOli
    Commented el 18 nov. 2020 a las 7:35
  • @SergioGarridoDomínguez lo intenté con async/await y tuve el mismo resultado
    – OliOli
    Commented el 18 nov. 2020 a las 7:37
  • Te recomiendo que saques el button del Link, el cambio de URL lo puedes hacer dentro del saveData() con history.push('/planes') y usando el HOC withRouter del paquete react-router-dom.
    – Gabri
    Commented el 18 nov. 2020 a las 7:54

1 respuesta 1

0

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.

5
  • gracias, lo intenté así y solo refresca la página o me sigue regresando null
    – OliOli
    Commented el 18 nov. 2020 a las 8:49
  • Asegúrate de renderizar el componente Rates únicamente cuando haya finalizado la llamada a Firebase, usando variables de estado useState() por ejemplo.
    – Gabri
    Commented el 18 nov. 2020 a las 8:52
  • Cuando dices que te refresca la página, ¿a qué tipo de refresco te refieres? ¿Te sitúa en la nueva URL sin refrescar la aplicación o ves que te vuelve a cargar todo?
    – Gabri
    Commented el 18 nov. 2020 a las 8:53
  • Vuelve a cargar todo, se refresca y me deja exactamente en el mismo lugar con el form que se había llenado vacío
    – OliOli
    Commented el 18 nov. 2020 a las 13:35
  • ¿Lo tienes en un form? Esto explicaría que te recargue la página. Actualizo mi código.
    – Gabri
    Commented el 18 nov. 2020 a las 13:58

Tu Respuesta

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

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