React & Javascript novato aquí, estoy tratando de construir mi primer proyecto React. Lo que quiero hacer es tener un botón que busque automáticamente los últimos partidos que jugué en un juego. Estoy usando una API que, cuando se llama correctamente, devuelve este json:

 {data: [{id: 0, internal_id: "_map_id_halo1_pillar_of_autumn", name: "The Pillar Of Autumn"}, …]}

Quiero extraer el nombre de cada objeto de datos y mostrar una lista desordenada debajo del botón.

Pero cuando hago clic en el botón, el navegador muestra el error:

TypeError: no se pueden leer las propiedades de undefined (leyendo 'json')

El código que hace lo que mencioné es el siguiente:

 async fetchHaloMaps() { const url = 'https://cryptum.halodotapi.com/games/hmcc/metadata/maps' const mapNames = []; fetch(url, { "method": 'GET', "headers": { 'Content-Type': 'application/json', 'Cryptum-API-Version': '2.3-alpha', 'Authorization': 'Cryptum-Token XXX' } }) .then(response => { console.log(response); if (!response.ok) throw new Error("Response not ok!"); }) .then(response => response.json()) .then(data => { const i=0; for (const d of data) { mapNames[i] = d.name; i++; } this.setState((state, props) => ({ numberOfMaps : i })); }) .catch(error => { console.log("There was an error: " + error); }); }

Creo que estoy "analizando" el JSON de manera incorrecta. Pero en el JSON, los datos son, de hecho, una matriz con un atributo de "nombre". Así que quería hacer un ciclo de la matriz de datos y copiar el atributo "nombre", pero el código anterior no funciona. Sé que la solicitud HTTP con fetch tiene éxito, ya que en console.log puedo ver el objeto de respuesta y tiene el campo 200 OK, y puedo ver el JSON asociado con las herramientas de desarrollo del navegador.