我正在构建一个主要用React编写的Gatsby应用程序。我有一个LoggedIn组件，可以读取所有user已借用的书并在网站上显示状态。我使用Firebase。我希望LoggedIn我可以在组件中获取书籍。但是我不确定如何等待fetch方法完成。当我使用时async/await，它刚刚坏了，因为然后我的功能组件将返回aPromise而不是JSX:ELEMENT类型。我该如何处理？
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
``
您只需要将asyncfetch函数放在一个useEffect钩子中，因为一旦加载DOM树，它将被触发。只需添加：
useEffect(()=>{
fetchUserRestaurant(user.email).then((info) => setBooks(info))
}, [])
添加一个空数组（deps）将使其componentDidMount()像一样工作，因为在像您这样的无状态组件中，您不能使用componentDidMount()生命周期，而必须使用钩子。这将导致闪烁内容，直到您的请求填充您的useState钩子并显示为止。您可以添加一个加载器或任何您想跳过的加载器。
其余代码似乎正确。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句