如何从promise中读取数据？

Question

我正在异步函数中获取数据，然后想在我的组件中使用它。我想我在理解代码中发生的事情时遇到了问题。

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main(){
  const data = await prisma.book.findFirst({
    where:{
      title:"TheLeanStartup"
    },
    select:{
      id:false,
      author:false,
      title:true,
      rating:false,
      image:false,
      tags:false
    }
  });
  return data;
}



export default function Review(){
  const book = main()
  .then(e=>{return e})
  .catch(e=>{console.log(e.message)})
  .finally(async ()=>{await prisma.$disconnect()});

  console.log(book) //still consoles Promise object!

  /*what I wanna do:
   return(<h1>{book.title}</h1>)
  */
}

据我了解，async函数返回promise，因此我尝试在组件中解析它，然后将结果分配给const。但是当我记录我的const时，它仍然显示Promise。

Answer 1

如何调整您的

Review

组件以正确处理 使用

main

 的异步 

async/await:

函数

import { useEffect, useState } from 'react';

export default function Review() {
  const [book, setBook] = useState(null);

  useEffect(() => {
    async function fetchBook() {
      try {
        const data = await main();
        setBook(data); // This will update your component's state with the fetched book
      } catch (error) {
        console.error(error.message);
      } finally {
        await prisma.$disconnect();
      }
    }

    fetchBook();
  }, []); // The empty array makes sure this effect runs only once after the component mounts

  if (!book) {
    return <div>Loading...</div>; // Or any other loading state representation
  }

  // Now you can use book directly in your JSX
  return (
    <h1>{book.title}</h1>
  );
}

async function main() {
  // Your main function here
}

React 挂钩

useState

和

useEffect

。

useState

用于管理组件的状态，其中 在本例中，是您要获取的图书数据。

useEffect

是一个在组件中执行副作用的钩子， 比如数据获取。这是打电话给您的

main

的完美场所 功能。

由于要在组件挂载时获取数据，所以第二个

useEffect

的参数为空数组，仅保证效果 运行一次。

在

useEffect

内部，我们定义并立即调用一个

async

功能

fetchBook

。这种模式是必要的，因为你不能 直接将异步函数传递给

useEffect

。

注意：在

setBook(data)

之后，组件将重新渲染，并且

book

将使用实际数据进行设置，允许您在 JSX 中使用

book.title

。