Tengo una función de Noticias donde el usuario puede publicar su estado. Sin embargo, hasta ahora, no puedo hacer que muestre todos los comentarios de las noticias ya que mi solución actual solo permite dos niveles. Aquí están mis códigos:
Noticias.js (para todos)
function News() { const {userId, setUserId} = useContext(UserContext); const {type, isUserType} = useContext(UserTypeContext); const [newsList, setNewsList] = useState([]); const rootNews = newsList.filter( (newList) => newList.reply_of === null ); const getReplies = commentId => { return newsList.filter(newList => newList.reply_of === commentId); } useEffect(()=>{ Axios.get('http://localhost:3001/news',{ }) .then((response) => { if(response.data.length > 0){ setNewsList(response.data); } }) },[]); return ( <div className = "news p-5"> <h3 className="news-title">News</h3> <div className = "comments-container"> {rootNews.map((rootNew) => ( <div> <Comment key={rootNew.news_id} comment={rootNew} replies={getReplies(rootNew.news_id)}/> </div> ))} </div> </div> ) }Comment.js (para representar los comentarios y las respuestas)
function Comment({comment, replies}) { return ( <div className="comment"> <div className="comment-image-container"> <img src = "/user-icon.png" /> </div> <div className="comment-right-part"> <div className="comment-content"> <div className="comment-author"> {comment.user_name} </div> <div>{comment.day}, {moment(comment.date).format('DD-MM-YYYY')} at {comment.time}</div> </div> <div className="comment-text">{comment.news_title}</div> {replies.length > 0 && ( <div className="replies"> {replies.map(reply => ( <Comment comment={reply} key={reply.news_id} replies={[]}/> ))} </div> )} </div> </div> ) }Este es un ejemplo de cómo se vería la estructura del comentario:
Comment 1 Reply 1.1 Reply 1.1.1 Reply 1.1.1.1 Reply 1.2 Comment 2¿Alguna idea sobre cómo podría generar infinitas respuestas, o posiblemente establecer el nivel máximo de respuestas permitidas? Gracias
Solo necesita un pequeño cambio en el componente Comment para representar recursivamente la estructura de datos ya anidada:
function Comment({ comment, newsList }) { const replies = newsList.filter((newList) => newList.reply_of === comment.news_id); return ( <div className="comment"> <div className="comment-image-container"> <img src="/user-icon.png" /> </div> <div className="comment-right-part"> <div className="comment-content"> <div className="comment-author">{comment.user_name}</div> <div> {comment.day}, {moment(comment.date).format("DD-MM-YYYY")} at{" "} {comment.time} </div> </div> <div className="comment-text">{comment.news_title}</div> {replies.length > 0 && ( <div className="replies"> {replies.map((reply) => ( <Comment key={reply.news_id} comment={reply} newsList={newsList} /> ))} </div> )} </div> </div> ); } Básicamente, simplemente mueve el código que obtiene las respuestas directas a un comentario al componente Comment .
Cuando procesa el componente de Comment raíz, todas las respuestas directas al comentario raíz se identificarán y provocarán la representación de componentes de Comment anidados, que a su vez identificarán las respuestas a la respuesta, generarán un componente de Comment anidado, etc.