Estoy creando una aplicación de blog simple en reaccionar en la que he anidado datos json, por lo que cada dato json tiene un único dato json anidado, lo mostraré con cada blog.
datos json
const blogs = [ { id : 1, title: 'First Blog', comments : [ { commentId : 1, body : 'First Comment', }, { commentId : 3, body : 'First Comment', }, ] }, { id : 2, title: 'Second Blog', comments : [ { commentId : 7, body : 'First Comment', }, { commentId : 9, body : 'First Comment', }, ] } ]aplicación.js
class App extends React.Component { render() { const blogs = this.state.blogs.map((blog) => ( blog.comments.map((comment) => ( <BlogDetail id={blog.id} key={blog.id} title={blog.title} commentId={comment.id} /> ) ) return ( <div> {blogs} </div> ) } } class BlogDetail extends React.Component { render() { return ( <div> {this.props.id} {this.props.title} </div> ) } } Cuando renderizo el componente BlogDetail , muestra un blog varias veces (depende de cuántos comentarios haya en él).
Lo he intentado muchas veces, pero todavía muestra esto.
Cualquier ayuda sería muy apreciada. Gracias de antemano.
De acuerdo con su código, BlockDetail muestra cada comentario en cada publicación. En BlockDetail, presenta cada comentario en comentarios con el título, pero en su json no existe una propiedad como 'título', solo el 'cuerpo'. ¿Qué estás intentando lograr?
const BlogDetail = (props) => { return ( <div> {props.commentId} {' '} {props.commentBody} </div> ) } function App() { // Blogs is the json you are using const blogs = Blogs.map((blog) => ( <div> {blog.title} {blog.comments.map((comment) => ( <BlogDetail key={blog.id} commentId={comment.commentId} commentBody={comment.body} /> ) )} <br /> </div> )) return ( <div> {blogs} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);Usando esto obtendrás un resultado como este
First Blog 1 First Comment 3 First Comment Second Blog 7 First Comment 9 First Comment