Necesito ayuda (Api llama en React Js Hooks) ¿Por qué no funciona esto? Necesito llamar a los valores de esa API
import React, { useEffect, useState } from 'react'; function Customers() { const [customers, setCustomers] = useState(null); useEffect(() => { fetch('https://reactstarter-app.herokuapp.com/api/customers') **API CALLS** .then(res => res.json()) .then(customers => setCustomers(customers)) }, []) return ( <div> <h2>Customers</h2> <ul> {customers.map((customer) => { return <li key={customer.id}>{customer.firstName} {customer.lastName}</li> })} </ul> </div> ); } export default Customers;Tal vez no sea una solución, pero no puedo pegar el código para comentar, así que tengo que publicar una respuesta:
function Customers() { // this is where you declare the "customers" const const [customers, setCustomers] = useState(null); useEffect(() => { fetch('https://reactstarter-app.herokuapp.com/api/customers') **API CALLS** .then(res => res.json()) // this is where you should change the "customers" to "data" // because of the variable name conflict .then(data => setCustomers(data)) }, [])Parece que está tratando de mapear a través de un estado nulo y probablemente obtenga un error, use la representación condicional para evitar el error y representar a los clientes después de la solicitud de API:
import React, { useEffect, useState } from 'react'; function Customers() { const [customers, setCustomers] = useState(null); useEffect(() => { fetch('https://reactstarter-app.herokuapp.com/api/customers') **API CALLS** .then(res => res.json()) .then(customers => setCustomers(customers)) }, []) return ( <div> <h2>Customers</h2> {!customers ? <h2>Loading customers...</h2> : <ul> {customers.map((customer) => { return <li key={customer.id}>{customer.firstName} {customer.lastName}</li> })} </ul>} </div> ); } export default Customers;