Estoy tratando de obtener alguna fecha de firebase usando reaccionar ingenuamente pero tengo algunos problemas, estoy usando useState para pasar la matriz de objetos en mi firebase a una matriz en mi código pero useState no pasa la matriz de firebase y no sé por qué esto es la función handle de getProducts
const [products, setProducts] = useState([]); const getProductHandle = async () => { const arr = await getProducts(); setProducts(arr); console.log(arr); console.log(products); }; useEffect(async() => { await getProductHandle(); }, []);y esta es la FlatList que estoy usando para mostrar mis productos
<FlatList data={products} // numColumns={2} renderItem={(itemData) => { <productCard productName={itemData.item.productName} price={itemData.item.price} details={itemData.item.details} type={itemData.item.type} image={itemData.item.image} />; }} />y esta es la tarjeta del producto
const productCard = ({ productName, price, image, details, type }) => { return ( <View style={{height:300, width:300 , borderWidth:1}}> <Image style={{ width: 100, height: 100 }} source={image} /> <Text> {productName} {price} {details} {type} </Text> </View> ); }; export default productCard;después de ejecutar el código, no me da ningún error e intenté consolar. Registrar la matriz desde mi base de fuego, regresa con los productos en la base de fuego, pero la matriz de productos en mi useState tiene cero elementos y no sé cómo resolver este problema
Su función renderItem no devuelve nada. Por lo tanto, la productCard de producto no se procesará.
Solucionarlo de la siguiente manera.
<FlatList data={products} // numColumns={2} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => { return <productCard productName={item.productName} price={item.price} details={item.details} type={item.type} image={item.image} />; }} />No puede pasar una devolución de llamada asíncrona anónima a useEffect y ni siquiera la necesita, simplemente llame a la función de esta manera.
useEffect(() => { getProductHandle(); }, []);Además, debe verificar el valor del estado fuera de la función asíncrona porque el nuevo valor estará disponible después de que el componente se vuelva a renderizar y no en la función asíncrona al instante.
Tal vez estos códigos puedan resolverlo.
<FlatList data={products} // numColumns={2} renderItem={(itemData) => ( <productCard productName={itemData.item.productName} price={itemData.item.price} details={itemData.item.details} type={itemData.item.type} image={itemData.item.image} />; )} /> La diferencia es que antes <productCard tienes que escribir entre paréntesis o si quieres con corchetes, debes escribir retorno