Estoy trabajando en un proyecto de pila completa usando Express en el back-end y reacciono en el front-end. Ahora el problema es con un componente específico. Se supone que obtiene los resultados de una consulta de la base de datos de /api/blogposts. Pero luego sale mal.

aquí está mi código:

 import React from 'react'; import './Blogposts.css'; import SingleBpost from '../SingleBpost/SingleBpost.js'; class Blogposts extends React.Component { constructor(props) { super(props); this.state = { receivedPosts: [] }; } async getBpostsFromServer() { const response = await fetch("/api/blogposts"); let myPosts = await response.json(); this.setState({receivedPosts: myPosts}); } componentDidMount() { this.getBpostsFromServer(); } render() { console.log(this.state.receivedPosts); return( <div id="Blogposts"> <SingleBpost title="Test" date="18/12/2021" author="Kepos Team" body="Hello, this is a test for the blogposts!" /> </div> ); } } export default Blogposts;

Solo hay un archivo console.log: console.log(this.state.receivedPosts); pero la consola me da dos resultados: primero imprime una matriz que no reconozco, luego imprime la matriz que necesito. (aquí hay una captura de pantalla https://imgur.com/a/q40aVkq ).

Pero cuando trato de alimentar los datos de this.state.receivedPosts en mi componente de esta manera:

 <SingleBpost title={this.state.receivedPosts[0].title} (etc etc) />

No funciona (mi pantalla en realidad se queda en blanco).

¿Alguien tiene alguna idea de lo que estoy haciendo mal aquí? ¡Gracias por cualquier ayuda!