Utilizo un ID de publicación determinado para obtener todos los comentarios de la publicación, y espero usar una función saveComments para establecer la matriz de comentarios cargados en la identificación de la publicación.
Así que pasé dos parámetros, postId (debe ser un valor numérico) y loadedComments (debe ser una matriz de comentarios).
useEffect( () => { fetchCommentsForPostId(postId) .then( loadedComments => { saveComments(postId, loadedComments); }); }, [] );Sin embargo, cuando imprimo el valor para verificar si los parámetros pasados son correctos. Me doy cuenta de que el primero es bueno, es una identificación para la publicación. Pero el segundo, los comentarios, también es un valor de identificación. Creo que debería ser una matriz.
function saveCommentsForPostId(postId, comments) { console.log(postId); // correct id number, eg. 1 console.log(comments); // incorrect, I think it should be an array of comments, but it is same as postId ... }Y luego, probé de otra manera. Convierto mis dos parámetros como un objeto en una función de llamada.
useEffect( () => { fetchCommentsForPostId(postId) .then( loadedComments => { saveComments({postId, loadedComments}); }); }, [] );Ahora, el postId sigue siendo correcto. Sin embargo, los comentarios son el objeto completo que pasé. Es como {postId: 1, loadedComments: Array(5)}. ¿Cómo podría ser un objeto completo? Creo que debería ser una matriz pura.
function saveCommentsForPostId(postId, comments) { console.log(postId); // correct id number, eg. 1 console.log(comments); // it is an object, eg. {postId: 1, loadedComments: Array(5)}. Why it is an object? I think it should be just an array. ... }Después de probar muchas formas, la única forma de trabajo es hacer parámetros como un objeto y obtener la matriz que quiero usar:
comments['loadedComments'] // this is the comment array I actually wantEstoy súper confundido al respecto. ¿Alguien podría explicar la lógica detrás de esto? ¡Gracias por adelantado!
*** actualizar
export function fetchCommentsForPostId(postId) { return new Promise( (resolve) => { // This inserts a 2 second delay so we can easily see a spinner at work setTimeout( resolve, 2000); }) .then( () => fetch(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`, { method: 'GET', }) ) .catch( () => Promise.reject('networkError') ) .then( response => { if(response.ok) { return response.json(); } return Promise.reject('serviceError'); }); }Ok, no estoy seguro de qué más estás haciendo, pero esto parece funcionar:
function fetchCommentsForPostId(postId) { return new Promise((resolve) => { // This inserts a 2 second delay so we can easily see a spinner at work setTimeout(resolve, 2000); }).then(() => fetch(`https://jsonplaceholder.typicode.com/posts/${postId}/comments`, { method: "GET", }) ) .catch(() => Promise.reject("networkError")) .then((response) => { if (response.ok) { return response.json(); } return Promise.reject("serviceError"); }); } function saveCommentsForPostId(postId, comments) { console.log("postId:", postId); console.log("comments:", comments); } function doStuff(postId) { fetchCommentsForPostId(postId).then((loadedComments) => { saveCommentsForPostId(postId, loadedComments); }); } doStuff(1);