Soy nuevo en React y estoy tratando de aprenderlo. Obtengo datos de la API y los usaré. Simplemente devuelve datos de la lista de matrices. Ayúdenme a resolver este problema. El registro dice que proviene del bucle users.map en JSX. Quiero mostrar los datos en la constante de usuario y convertirme en una lista de matriz
const Item = ({user_id, title, body}) => { return ( <View style={styles.container}> <Text style={styles.text}>User Id :{user_id} </Text> <Text style={styles.text}>Tittle :{title} </Text> <Text style={styles.text}>Body :{body} </Text> <View style={styles.line}></View> </View> ) } const Berita = () => { const [users, setUsers] = useState([]); useEffect(() => { getData(); }, []); const getData = () => { axios .get('https://gorest.co.in/public/v1/posts') .then(res => { console.log('res: ', res); setUsers(res.data); }) } return ( <View style={styles.container}> {users.map(user => { return <Item key={user.id} user_id={user.user_id} title={user.title} body={user.body}/> })} </View> ) } export default BeritaGracias por tu tiempo
Su problema es que res.data no es lo que cree que es. En realidad, es un objeto y no una matriz, por lo que cuando intenta usar .map() en un objeto, obtiene un error porque .map() no es un método definido para esa función.
Cuando usa axios.get() , obtiene una Promesa que se resuelve en un objeto de respuesta que tiene la siguiente forma:
La respuesta a una solicitud contiene la siguiente información.
{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the HTTP headers that the server responded with // All header names are lower cased and can be accessed using the bracket notation. // Example: `response.headers['content-type']` headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {} }
En su ejemplo, el res en .then(res => es un objeto de esta estructura, y es la propiedad de data de este objeto de respuesta la que contiene el cuerpo/datos con los que responde su API. En su ejemplo, los data del objeto anterior la propiedad tiene:
{ "meta": { /* ... properties ... */ }, "data": [/* user objects */ {...}, {...}, ...] } Por lo tanto, para acceder correctamente a su matriz de objetos de usuario desde el objeto objeto, primero debe acceder a res.data que le da acceso al objeto anterior, y luego a .data (usando res.data.data ) para obtener acceso a la matriz de objetos de usuario del objeto:
const getData = () => { axios .get('https://gorest.co.in/public/v1/posts') .then(res => { setUsers(res.data.data); }); }