0
148
ViewsLa lista plana nativa de React devuelve solo un artículo de firestore
Soy nuevo con reaccionar nativo. Estoy usando una lista plana para representar datos de firebase (v9).
Todo funciona bien, no hay ningún error, pero la lista muestra solo un elemento. Después de buscar en diferentes temas, creo que el problema es del keyExtractor. Pero no se como solucionarlo.
El extractor de claves del código:
keyExtractor={item => item.id}Aquí está el código:
const Liste = () => { const [users, setUsers] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [isLoading, setIsLoading] = useState(false); const querySnapshot = await getDocs(collection(db, "form")); querySnapshot.forEach((doc) => { setUsers([...users, doc.data()] ); }); } const renderItem = ({ item }) => { return( <View> <View> <Text>{`${item.Address}`}</Text> <Text>{`${item.Prix}`}</Text> <Text>{`${id}`}</Text> </View> </View> ); }; const renderLoader = () => { return ( isLoading ? <View style={styles.loaderStyle}> <ActivityIndicator size="large" color="#aaa" /> </View> : null ); }; const loadMoreItem = () => { setCurrentPage(currentPage + 1); }; return ( <View <StatusBar backgroundColor="#000" /> <FlatList data={users} renderItem={renderItem} keyExtractor={item => item.id} ListFooterComponent={renderLoader} onEndReached={loadMoreItem} onEndReachedThreshold={0} /> </View> )} export default Liste;Tienda de fuego:
La pantalla de la aplicación:
Podrías ayudarme ?? Muchas gracias !!
·
Juan Pablo Isaza
1 answers
Answer question0
La mejor práctica recomendada es ejecutar efectos secundarios como obtener datos del servidor dentro del gancho useEffect .
const Liste = () => { const [users, setUsers] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [isLoading, setIsLoading] = useState(false); const getUsers = async () => { let result = []; const querySnapshot = await getDocs(collection(db, "form")); querySnapshot.forEach((doc) => { result.push(doc.data()); }); setUsers([...result]); }; useEffect(() => { getUsers(); }, []); const renderItem = ({ item }) => { return ( <View> <View> <Text>{`${item.Address}`}</Text> <Text>{`${item.Prix}`}</Text> </View> </View> ); }; const renderLoader = () => { return isLoading ? ( <View style={styles.loaderStyle}> <ActivityIndicator size="large" color="#aaa" /> </View> ) : null; }; const loadMoreItem = () => { setCurrentPage(currentPage + 1); }; return ( <View> <StatusBar backgroundColor="#000" /> <FlatList data={users} renderItem={renderItem} keyExtractor={(item) => item.id} ListFooterComponent={renderLoader} onEndReached={loadMoreItem} onEndReachedThreshold={0} /> </View> ); }; export default Liste;
·
Juan Pablo Isaza
Report
Answer question