Tengo un servidor API backend (FastAPI) donde puedo publicar/obtener/actualizar/eliminar elementos en una colección de MongoDB. Ahora quiero mostrar estos elementos en un React-Frontend, que obtiene la API como se muestra en este código:

 import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); this.state = { items: [] } } componentDidMount() { const url = "http://localhost:8000/items"; fetch(url) .then(response => response.json()) .then(json => this.setState({ items: json })) } render() { const { items } = this.state; console.log(items) console.log(Object.keys(items)) return ( <div className="container"> <div class="jumbotron"> <h1 class="display-4">Items from our API call</h1> </div> {/* because we have a dict not an array */} {Object.keys(items).map((item) => ( <div className="card" key={item._id}> <div className="card-header"> ITEM #{item.name} {item.type.name} </div> <div className="card-body"> PRICE: {item.price} </div> </div> ))} </div> ); } } export default App;

El sitio no muestra nada, si busco en Herramientas de desarrollo, dice "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'nombre')".

No sé cómo solucionar este error de tipo, la API tiene este formato:

 { "items": [ { "_id": "6273be87b410b45e0f438df4", "name": "Fifa22", "price": 40, "type": "hardware" } ] }