Intento llamar a la función getAuthor , dentro de la function (line 24 -console.log) todo está bien, pero no sé cómo debo llamar a la función getAuthor (línea 37) correctamente.
Este es un componente con Comentarios, en mi base de datos, dentro del registro de comentarios solo tengo authorId , así que quiero llamar a la getUser(authorId) para obtener otra información, como foto de profilePhoto , name , etc.
/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable no-underscore-dangle */ /* eslint-disable import/no-cycle */ /* eslint-disable jsx-a11y/anchor-is-valid */ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { getComments, getUser } from '../../actions/FetchData'; import '../../scss/base/_comments.scss'; import CommentForm from './CommentForm/CommentForm'; function Comments({ placeId }) { const [comments, setComments] = useState([]); useEffect(() => { const fetchMyData = async () => { const commentsFromDb = await getComments(); setComments(commentsFromDb); }; fetchMyData(); }, []); const getAuthor = async (authorId) => { const authorFromDb = await getUser(authorId); console.log(authorFromDb.profilePhoto); return authorFromDb; }; return ( <> <h1>Komentarze</h1> <div className="comments"> {comments.filter((comment) => comment.placeId === placeId).reverse().map((comment) => ( <div className="comment"> <p> author: {' '} {getAuthor(comment.authorId)} </p> <p> subject: {' '} {comment.subject} </p> <p> date: {' '} {comment.date} </p> <p> message: {' '} {comment.message} </p> <p> o: {' '} {comment.placeId} </p> </div> ))} </div> <CommentForm placeId={placeId} /> </> ); } Comments.propTypes = { placeId: PropTypes.string.isRequired, }; export default Comments;No puede llamar a la función asíncrona en JSX, devolverá una promesa. Tienes que resolver la promesa primero.
Una solución es hacer lo mismo que hiciste con los comments , (poniéndolo useEffect hook)
Como esto:
... const [comments, setComments] = useState([]); const [author, setAuthor] = useState([]); useEffect(() => { const fetchMyData = async () => { const commentsFromDb = await getComments(); setComments(commentsFromDb); const authorFromDb = await getAuthor(commentsFromDb.authorId); setAuthor(authorFromDb ); }; fetchMyData(); }, []); ...Recomiendo que cuando obtenga los comentarios para mapear los comentarios y solicite a los autores los comentarios y luego agregue una nueva propiedad a su objeto de comentario que represente al autor y luego, en el procesamiento, pueda acceder fácilmente a las propiedades del autor.
import "./styles.css"; import { useEffect, useState } from "react"; export default function App() { const [comments, setComments] = useState([]); const placeId = 1; async function getComments() { return [ { placeId: 1, authorId: 1, subject: "subject", date: "21-2-2020" } ]; } async function getUser(id) { return { profilePhoto: "Hi there", name: "Ob616" }; } useEffect(() => { getComments().then(async (commentsFromDb) => { for (let index = 0; index < commentsFromDb.length; index++) { const comment = commentsFromDb[index]; comment.author = await getAuthor(comment.authorId); } console.log(commentsFromDb); setComments(commentsFromDb); }); }, []); const getAuthor = async (authorId) => { const authorFromDb = await getUser(authorId); console.log(authorFromDb.profilePhoto); return authorFromDb; }; return ( <> <h1>Komentarze</h1> <div className="comments"> {comments .filter((comment) => comment.placeId === placeId) .reverse() .map((comment) => ( <div className="comment"> <p>author: {comment.author.name}</p> <p>subject: {comment.subject}</p> <p>date: {comment.date}</p> <p>message: {comment.message}</p> <p>o: {comment.placeId}</p> </div> ))} </div> <CommentForm placeId={placeId} /> </> ); }