注册
登录
数据仓库
如何使用Gatsby或React功能组件处理从数据库异步获取
返回
如何使用Gatsby或React功能组件处理从数据库异步获取
作者:
春风助手
发布时间:
2024-12-18 10:22:51 (19天前)
<p>我正在构建一个主要用React编写的Gatsby应用程序。我有一个LoggedIn组件，可以读取所有user已借用的书并在网站上显示状态。我使用Firebase。我希望LoggedIn我可以在组件中获取书籍。但是我不确定如何等待fetch方法完成。当我使用时async/await，它刚刚坏了，因为然后我的功能组件将返回a Promise而不是JSX:ELEMENT类型。我该如何解决这个问题？</p> <pre><code>import React, { useState } from 'react' import {fetchUserBook} from "../../firebase/firebaseService" const LoggedIn = ({user}) => { //if I put async before user, //my LoggedIn component will return a promise, not a JSX component, which will break my code. const[books,setBooks] = useState([]) fetchUserRestaurant(user.email).then((info) => setBooks(info)) const renderloggedIn = () =>{ return ( <> <h1>Welcome, {user.email}.</h1> // I hope that I can pass the "books" props here so that I can render it. // But usually the return statement is invoked before my fetchUserRestaurant method finishes. </> ) } return( renderloggedIn() ) } export default LoggedIn `` </code></pre>
收藏
举报
2 条回复
1#
回复此人
只怕再见是故人
|
2020-08-18 17-24
您只需要将asyncfetch函数放在一个useEffect钩子中，因为一旦加载DOM树，它将被触发。只需添加： ``` useEffect(()=>{ fetchUserRestaurant(user.email).then((info) => setBooks(info)) }, []) ``` 添加一个空数组（deps）将使其componentDidMount()像一样工作，因为在像您这样的无状态组件中，您不能使用componentDidMount()生命周期，而必须使用钩子。这将导致闪烁内容，直到您的请求填充您的useState钩子并显示为止。您可以添加一个加载器或任何您想跳过的加载器。 其余代码似乎正确。
编辑
登录
后才能参与评论
