0
476
Vistas¿Cómo crear una cuadrícula de imágenes con React Native después de recopilar datos de Axios?
Estoy tratando de crear una cuadrícula de imágenes como la siguiente en React Native.
He logrado extraer los datos de https://pokeapi.co/ usando Axios. Mi código es el siguiente hasta ahora, pero no parece funcionar. El siguiente código recupera datos de la API y configuré esos datos en setPokemon (Cómo accedo a estos datos) Intenté asignar esos datos a {data} a continuación para usarlos dentro de la lista plana pero no funciona. No parece asignar los datos en absoluto.
export default function App() { const [pokemons, setPokemon] = useState([]) //Fetching Pokemon from online database async function fetchPokemon() { try { const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=50') setPokemon(data.results) // ASSIGN DATA TO setPokemon } } //Hook to fetch Pokemon upon component mount useEffect(() => { fetchPokemon() }, []) const renderPokemon = (item, index) => { return <Text>{item.name}</Text> } const {data} = setPokemon // ALL POKEMON SHOULD BE INSIDE THIS return ( <SafeAreaView> <FlatList style={styles.container} data={data} // ALL POKEMON SHOULD BE INSIDE THIS renderItem={renderPokemon} keyExtractor={pokemons => `key-${pokemons.name}`} > </FlatList> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1 }, });¿Algún consejo sobre esto?
1 Respuestas
Responde la pregunta0
Está intentando acceder a los datos de la función de establecimiento de estado. Después de llamar a setPokemon(5) , los pokemons serán 5.
const {data} = pokemons espera que tus datos sean un objeto, pero los has inicializado como una lista y parece que estás tratando de llenarlos como una lista. ¿Quieres escribir const data = pokemons para simplemente cambiarle el nombre en lugar de desestructurarlo?
Suponiendo que data.results es una lista de cosas, así es como se verá el componente de trabajo:
function App() { const [pokemons, setPokemon] = useState([]); async function fetchPokemon() { try { const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=50') setPokemon(data.results) } } useEffect(fetchPokemon, []) const renderPokemon = (item, index) => { return <Text>{item.name}</Text> }; return ( <SafeAreaView> <FlatList style={styles.container} data={pokemons} // ALL POKEMON SHOULD BE INSIDE THIS renderItem={renderPokemon} keyExtractor={pokemons => `key-${pokemons.name}`} > </FlatList> </SafeAreaView> ); }; Editar: parece que hay otro error relacionado con la desestructuración de objetos. Si observa los documentos de FlatList, renderItem requiere una función con esta firma: (o: {item: T, index: number}) => Element . Simplemente actualice su función renderPokemon.