Tuve un problema en el que mi función no se procesaba porque no creo que React entendiera que el estado estaba cambiando. Después de cambiar forEach() a map() , la característica se representó como se esperaba.
La función tomará las suscripciones de los usuarios de una API y luego las representará como una lista. Esta es la versión final de trabajo.
... export default function MyComp() { const [userSubIds, setUserSubIds] = useState() useEffect(() => { getSubs().then(p => setUserSubIds(p)) }, []) return ( <> { userSubIds?.map(subId => { <ListItem> {subId.data} </ListItem> }) } </> ) Anteriormente había usado forEach() . Esto no devolvió ningún error ni ninguna función en la página web.
... userSubIds?.forEach(subId => { <ListItem> {subId.data} </ListItem> }) ... Al leer los documentos, forEach() siempre devuelve undefined y map() devuelve una nueva matriz. Pero lo que me falta en el conocimiento es por qué esto es importante para la representación.
Esto se debe a que su ciclo tiene que devolver elementos. Esos elementos entrarán en sus etiquetas y, por lo tanto, se representarán.
Ahora, map devuelve una matriz del mismo tamaño con los elementos modificados. forEach no devuelve nada. Simplemente está atravesando la matriz. No da a reaccionar los elementos que necesita.
<> { userSubIds?.map(subId => <ListItem> {subId.data} </ListItem> ) } <> // This has returned elements like this <ListItem> some data </ListItem> <ListItem> some data </ListItem> <ListItem> some data </ListItem> ... Sin embargo, forEach no ha devuelto ningún dato.
userSubIds?.forEach(subId => <ListItem> {subId.data} </ListItem> }) // This has returned nothing.