jsx內部的異步函式呼叫

我嘗試呼叫該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;

uj5u.com熱心網友回復：

你不能在 JSX 中呼叫異步函式，它會回傳一個承諾。你必須先解決這個承諾。

一種解決方案是做與你做的相同的事情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();
}, []);
...

uj5u.com熱心網友回復：

我建議當您獲得評論以映射評論并請求作者提供評論，然后向代表作者的評論物件添加一個新屬性，然后在渲染中您可以輕松訪問作者屬性

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

標籤：javascript 反应 异步 反应钩子 jsx

上一篇：如何在Flutter中重新加載FutureBuilder？

下一篇：除非verifyPhoneNumber方法完成，否則不想完成Future