Estoy tratando de mapear sobre una serie de objetos. No entiendo por qué comment.commenter_comment es "indefinido". Pensé que la notación de mapa y punto funcionaba en objetos si estaban anidados dentro de una matriz, ¿estoy malinterpretando esto?
En última instancia, quiero mostrar "k" ( commenter_comment: 'k' ) para el primer ciclo, y así sucesivamente...
import React from 'react'; export default function Comments(props) { var holder = [] if (props.post && props.post.comments_text) { holder.push(Object.values(props.post.comments_text)) return ( <div> {holder.map((comment) => { return ( <div> {comment.commenter_comment} </div> ) })} </div> ) } else { return null; } } Como referencia, los props se ven así:
props = { post: { comment: true, comments_text: { -Mk0Bzc8T-p6ATuwn_2T: {commenter_comment: 'k', commenter_handle: 'SHARK1', commenter_uid: '1lJQ2rVtzRdgp4K1SZJbXAopsfm1'} -Mk0CdvBkgIwfsZATPsS: {commenter_comment: 's', commenter_handle: 'SHARK1', commenter_uid: '1lJQ2rVtzRdgp4K1SZJbXAopsfm1'} -Mk0Cht7il7Ohn6OiziB: {commenter_comment: 's', commenter_handle: 'SHARK1', commenter_uid: '1lJQ2rVtzRdgp4K1SZJbXAopsfm1'} -Mk-AnrSJVU7sOmeVP_n: {commenter_comment: 'testing14', commenter_handle: 'SHARK1', commenter_uid: '1lJQ2rVtzRdgp4K1SZJbXAopsfm1'} } handle: "bug1", key: "-MjLYDJlHXnO-HaL6R58", title: "k" } }Gracias por cualquier ayuda o consejo.
Está haciendo que su holder sea una matriz que contenga un solo valor, y ese valor será la matriz de valores del objeto:
var holder = [] if (props.post && props.post.comments_text) { holder.push(Object.values(props.post.comments_text)) Desea asignar todos los valores de objeto, no el holder . Si bien podría acceder al holder[0] , creo que su código sería menos confuso si lo eliminara por completo.
export default function Comments(props) { const comments = props.post?.comments_text; return !comments ? null : Object.values(comments).map(comment => ( <div> {comment.commenter_comment} </div> )); };Puedes probar esto
import React from 'react'; import {useState} from 'react'; export default function Comments(props) { const [holder, setHolder] = useState(Object.values(props.post.comments_text)); return ( holder.length != 0 ? <div> {holder.map((comment) => { return ( <div> {comment.commenter_comment} </div> ) })} </div> : null ) }Aquí estamos creando un estado titular y estableciéndole el valor de "post.comments_text". Es una buena práctica usar los ganchos de reacción cuando se maneja el estado en los componentes funcionales.