Recibo este error cuando intento usar el método GET en AXIOS. En la parte inferior puse un fragmento de código sin estilo. Quiere obtener datos de la API usando AXIOS. Soy nuevo y no sé muy bien cómo hacer esto correctamente.
undefined no es un objeto (evaluando 'data.map')
código:
import React, {useState, useEffect} from 'react'; import axios from 'axios'; const HomeScreen = ({navigation}) => { const [categoryIndex, setCategoryIndex, data, setData] = useState([]) useEffect(() => { const fetchData = async () => { const result = await axios( 'https://hn.algolia.com/api/v1/search?query=redux', ); setData(result.data); }; fetchData(); }, []); return ( <SafeAreaView <ul> {data.map(item => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li> ))} </ul> </SafeAreaView> ); }; export default HomeScreen;https://reactjs.org/docs/hooks-state.html
https://codesandbox.io/s/antiguo-rápido-pdqhy?file=/src/TestApp.jsx
Si pegas esto funcionará correctamente:
import React, { useState, useEffect } from "react"; import axios from "axios"; const HomeScreen = ({ navigation }) => { const [data, setData] = useState([]); const [categoryIndex, setCategoryIndex] = useState([]); useEffect(() => { const fetchData = async () => { const result = await axios( "https://hn.algolia.com/api/v1/search?query=redux" ); console.log(result); setData(result.data); }; fetchData(); }, []); return ( <SafeAreaView> <ul> {data?.hits && data.hits.map((item) => ( <li key={item.objectID}> <a href={item.url}>{item.title}</a> </li> ))} </ul> </SafeAreaView> ); }; export default HomeScreen; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>