Todavía estoy luchando con el orden de renderizado de React Natives. Estoy obteniendo la API, luego filtro estos datos y finalmente estoy manipulando los datos. Cuando cargo la aplicación por primera vez, no muestra los datos de manera adecuada, solo aparece cuando los guardo en mi editor de código.
Mi código simplificado:
const [data, setData] = useState([]); const [sumPost, setSumPost] = useState(0); const [sumProd, setSumProd] = useState(0); useEffect(() => { const unsubscribe = db.collection("Dates").where("projektName", "==", Projektname).onSnapshot(snapshot => ( setData( snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), }))) )) return unsubscribe; }, []) const produktionsFilter = data.filter( x => x.data.jobtype == "Produktion" ); const postFilter = data.filter( x => x.data.jobtype == "Postproduktion" ); const terminFilter = data.filter( x => x.data.jobtype == "Termin" ); let i; const addPostProdTage = () => { const post = []; const prod = []; for(i=0; i < postFilter.length; i++){ const p = postFilter[i].data.alleTage.length; post.push(p) } for(i=0; i < produktionsFilter.length; i++){ const l = produktionsFilter[i].data.alleTage.length; prod.push(l) } setSumPost(post.reduce(function(a, b){ return a + b; }, 0)); setSumProd(prod.reduce(function(a, b){ return a + b; }, 0)); } useEffect(() => { addPostProdTage(); }, []) return( <View> <Text>{sumPost}</Text> <Text>{sumProd}</Text> </View> )sumProd debe ser 18 y sumPost debe ser 3. En este momento, muestra 0 en ambos, porque ambos estados son matrices vacías inicialmente. Necesita algún tipo de actualización.
Estoy seguro de que hay formas más eficientes de codificar esto, pero necesito ayuda para entender por qué mis datos no se muestran correctamente cuando cargo la aplicación por primera vez, porque me encuentro con este problema una y otra vez.
Gracias a todos los consejos que recibí aquí, para futuras referencias, así es como resolví esto:
Filtré los datos dentro de la instantánea:
useEffect(() => { const post = db .collection("Dates") .where("projektName", "==", Projektname) .where("jobtype", "==", "Postproduktion") .onSnapshot((snapshot) => setPost( snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ) ); return post; }, []);Tuve pasos innecesarios para hacer mi cálculo. Podría simplificar esto en una sola función:
const revData = () => { setSumPost( post.reduce(function (prev, cur) { return prev + cur.data.alleTage.length; }, 0) ); };Y finalmente, tuve un useEffect para llamar a esa función después de que los datos se hayan obtenido usando la matriz de dependencia:
useEffect(() => { revData(); }, [post]);Está creando variables locales que quedan fuera del alcance. Podría detectar este error si estuviera usando mecanografiado en lugar de javascript.
En su lugar, desea crear objetos de estado como este:
const [sumPost, setSumPost] = useState(0) const [sumProd, setSumProd] = useState(0);Y luego establezca los valores de esos objetos como se muestra:
setSumPost(postproduktionsTage.reduce(function(a, b){ return a + b; }, 0)); setSumProd(produktionsTage.reduce(function(a, b){ return a + b; }, 0));Y luego puedes usarlo como quieras:
return( <View> <Text>{sumPost}</Text> <Text>{sumProd}</Text> </View> )