为什么它先呈现'Undefined'，然后在日志中显示对象

Question

我应该如何修复我的 React 应用程序，即使代码在应用程序中只有一个控制台.log，它也会呈现两个具有不同结果的日志？是的，我删除了索引.js文件中的，因为它也会触发渲染两次。在终端中，第一个日志是未定义的，第二个日志具有带有数据的对象，因此当我使用数组映射方法时，它一直说"BookDetail.jsx：26 Uncatch TypeError： bookData.map 不是一个函数"。

我正在尝试从Firebase数据库中获取有关一本书的详细信息。我的目标非常简单，前端用户单击书名并进入详细页面。Firestore 数据库中的所有数据存储。 详细的页面代码如下，希望有人可以帮助我，谢谢！

import React, {useState, useEffect} from 'react'
import {Link} from 'react-router-dom'
import firebase from '../config/fbConfig'
const BookDetails = (props) => {
const id = props.match.params.id
const db = firebase.firestore()
const [books, setBooks] = useState('')
useEffect(() => {
db.collection("books")
.doc(id)
.get()
.then(doc => doc.data())
.then(data => setBooks(data))
},[])
const bookData = {books}             
return (
<div className="book_details">
<Link to="/"><h2>Home</h2></Link>     
{console.log(bookData)}
<h1>The Summary Of the Book </h1>
{bookData.map(book => <div key={book.id}> {book.brief} </div>)}
</div>
)
}
export default BookDetails

Answer 1

根据 ReactJS 文档，建议在组件的顶层调用钩子：https://reactjs.org/docs/hooks-rules.html

因此，当您的组件挂载时，它似乎调用了您的自定义 useBooks 钩子。

它初始化书籍状态，然后执行 useEffect。但是，我认为调用 Firestore db 函数是一个异步过程，因为您没有等待响应，所以您的函数返回未定义。

似乎您可能不需要自定义钩子。在顶层设置 useState 和 useEffect。

const BookDetails = (props) => {
const id = props.match.params.id
const db = firebase.firestore()
const [books, setBooks] = useState([])
useEffect(() => {
const fetchBooks = () => {
db.collection("books")
.doc(id)
.get()
.then(doc => doc.data())
.then(data => setBooks(data))
}
fetchBooks()
},[])
return (
<div className="book_details">
<Link to="/"><h2>Home</h2></Link>     
{console.log(books.title)}
<h1>The Summary Of the Book </h1>
{books && books.map(book => <div key={book.id}> {book.brief} </div>)}
</div>
)
}
export default BookDetails

const data = doc.data(( 似乎是一个异步函数，所以你可能想为 setBooks 链接另一个 .then