jsx内部的异步函数调用

Question

我尝试调用getAuthor函数，在function (line 24 -console.log)内部一切都很好，但我不知道我应该如何正确调用getAuthor函数(第37行)。

这是一个具有评论的组件，在我的数据库中，在评论记录中我只有authorId，所以我想调用getUser(authorId)函数来获取其他信息，如profilePhoto,name等。

/* 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;

Answer 1

我建议当你得到评论映射评论请求作者的评论然后添加一个新的属性到你的评论对象代表作者然后在渲染中你可以很容易地访问作者属性

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} /> 
</>
);
}

Answer 2

你不能在JSX中调用async函数，它会返回一个promise。你必须先解决这个承诺。

一个解决方案是做与comments相同的事情，(将useEffect钩子)

:

...
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();
}, []);
...