¿Cómo es posible obtener el primer objeto de los datos de respuesta y almacenarlo en un estado?
Intenté algo como esto, donde uso setData y almaceno el primer objeto de los datos en él:
export default function BuildingsDetail({buildingId}) { const [data, setData] = useState({}); const navigate = useNavigate(); useEffect(()=> { if (!localStorage.getItem('token')) { navigate('/login'); } else { fetch(Config.domain + 'kingdom/buildings/:'+buildingId, { headers: {'Authorization': 'Bearer '+localStorage.getItem('token')} }) .then(res=>res.json()) .then(data => { setData(data[0]); }) } }, [buildingId]) console.log(data); return( <div className='container'> <div className='building-details'> <img /> <p></p> <p></p> {data.type === 'Academy' ? <BuildingsButton type={data.type} level={data.level}/> : ''} <BuildingsButton type={data.type} level={data.level}/> </div> </div> );Recibo errores indefinidos para data.type, que no puedo entender ya que debería ser un objeto que tiene una clave de 'tipo'.
Además, cuando estoy cerrando la sesión de datos, dice indefinido.
La respuesta del cartero es la siguiente:
[ { "id": 63, "kingdom_id": 31, "type": "Academy", "level": 1, "hp": 100, "started_at": 1642410594584, "finished_at": 1642410654584 } ]Creo que el problema es que está intentando mostrar data antes de que la llamada de fetch los cargue.
Cambie el valor predeterminado de su estado a null :
const [data, setData] = useState(null); Y agregue una condición para verificar si el estado de los data está presente antes de representar la página:
if (!data) { return <>Loading data...</> } return ( <div className='container'> <div className='building-details'> <img /> <p></p> <p></p> {data.type === 'Academy' ? ( <BuildingsButton type={data.type} level={data.level} /> ) : ( '' )} <BuildingsButton type={data.type} level={data.level} /> </div> </div> );Debería evitar el error.