Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

145
Vistas
Why does my code create a new empty array?

This is my code:

const Practice = () => {
    const [todo, setTodo] =useState("");
    const [todos,setTodos]=useState([])
    const onSubmit =async(event) =>{
        event.preventDefault();
        setTodos((currnet)=>[todo, ...currnet])
        setTodo("")
        try {
            const docRef = await addDoc(collection(db, "todos"), {
              todos,
            });
            console.log("Document written with ID: ", docRef.id);
          } catch (e) {
            console.error("Error adding document: ", e);
          }
    }
    const onChange = (event)=>{
        setTodo(event.target.value)
    }
    console.log(todos)
  return (
    <>
        <form onSubmit={onSubmit}>
            <input onChange={onChange} value={todo} type="text" placeholder="Write" />
            <input type="submit" value="GO!!" />
        </form>
    </>
  )
}

and I input some words in tag but last input word dosen't exist my firebase database. why dosen't exist my database? and why create new empty array? enter image description here

enter image description here

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Your problem is related to the asynchronous nature of the hooks.

In onSubmit function, you are setting todos using setTodos hook (that is async) and then you are reading todos value (to store it into firebase).

You can't write this code in an async context! Infact, could be that todos will be read before hook setted him (and the result will be that not all the data will be stored into firebase).

To solve this bug you have to use useEffect hook in this way:

const Practice = () => {
    const [todo, setTodo] =useState("");
    const [todos,setTodos]=useState([])

    useEffect(() => {
        // 1) define an async function in useEffect hook
        const storeData = async () => {
           try {
            const docRef = await addDoc(collection(db, "todos"), {
              todos,
            });
            console.log("Document written with ID: ", docRef.id);
          } catch (e) {
            console.error("Error adding document: ", e);
          }
        }

        // 2) reset todo
        setTodo("");
        // 3) store todos into firebase
        storeData();

    }, [todos]);

    const onSubmit =async(event) =>{
        event.preventDefault();
        setTodos((currnet)=>[todo, ...currnet]);
    }
    const onChange = (event)=>{
        setTodo(event.target.value)
    }
  return (
    <>
        <form onSubmit={onSubmit}>
            <input onChange={onChange} value={todo} type="text" placeholder="Write" />
            <input type="submit" value="GO!!" />
        </form>
    </>
  )
}

Explanation:

  1. onSubmit function needs just to set todos (no further action required);
  2. When todos changes, useEffect hook will be called (only at this time you are 100% sure that todos will contain all the elements you have to store into firebase!);
  3. Now in useEffect you can clean todo and then call storeData function to store todos into firebase.

Additional note: why I defined an async function in useEffect if I could write something like:

useEffect(async () => {    // never use async useEffect!!!
  try {
     const docRef = await addDoc(collection(db, "todos"), {
        todos,
     });
     console.log("Document written with ID: ", docRef.id);
  } catch (e) {
      console.error("Error adding document: ", e);
  }
}, [todos])

There is a reason why you can't write async useEffect but I'm not an expert so I strongly suggest you to read this article.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda