Estoy usando ganchos de reacción para obtener una API y mostrar la lista de nombres y apellidos de los jugadores de la NBA. La obtención de la API es exitosa, ya que se puede mostrar en el registro, pero no muestra los nombres.
API gratuita que utilicé: https://www.balldontlie.io/
//componente de reacción para obtener y mostrar datos
import { useCallback, useEffect, useState } from "react"; function App() { const [data, setData] = useState([]); const refreshData = useCallback(() => { fetch("https://www.balldontlie.io/api/v1/players") .then((res) => res.json()) .then((data) => { setData(data); console.log(data); }); }, []); useEffect(() => { refreshData(); }, []); return ( <div> <h1>My player</h1> <ul> {Object.values(data).map((item) => ( <li key={item.id}> {item.first_name} {item.last_name} </li> ))} </ul> </div> ); } export default App; Los data son un objeto con dos claves, data y meta , ninguno de los cuales son objetos de jugadores con propiedades de nombre y apellido.
// 20211018232429 // https://www.balldontlie.io/api/v1/players { "data": [ { "id": 14, "first_name": "Ike", ... "last_name": "Anigbogu", ... }, ... { "id": 497, "first_name": "Michael", ... "last_name": "Ansley", ... } ], "meta": { .... } } Desea asignar la propiedad data que es la matriz de objetos del jugador.
function App() { const [data, setData] = useState([]); const refreshData = useCallback(() => { fetch("https://www.balldontlie.io/api/v1/players") .then((res) => res.json()) .then((data) => { setData(data.data); // <-- save data.data array }); }, []); useEffect(() => { refreshData(); }, [refreshData]); return ( <div> <h1>My player</h1> <ul> {data.map((item) => ( // <-- map data array <li key={item.id}> {item.first_name} {item.last_name} </li> ))} </ul> </div> ); } function App() { const [data, setData] = React.useState([]); const refreshData = React.useCallback(() => { fetch("https://www.balldontlie.io/api/v1/players") .then((res) => res.json()) .then((data) => { setData(data.data); }); }, []); React.useEffect(() => { refreshData(); }, [refreshData]); return ( <div> <h1>My player</h1> <ul> {data.map((item) => ( <li key={item.id}> {item.first_name} {item.last_name} </li> ))} </ul> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <App />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />No actualizó el estado con el valor real. pasaste el objeto al estado. Esto es lo que tiene que pasar para acceder a los valores:
const refreshData = useCallback(() => { fetch("https://www.balldontlie.io/api/v1/players") .then((res) => res.json()) .then((data) => { setData(data.data); console.log(data); }); }, []);