Reactjs 反应useffect钩子并返回数据

我仍在学习React，它是hooks，我不断遇到一个我一直无法解决的问题

简而言之，我使用useEffect和useState基本上从postgres数据库中提取数据，express作为中间件。路由工作，所有内容都处于活动状态并正在运行，但它会不断返回空白数据。我试着把它设置成吐出列表中的每一项。我首先想也许这与我如何通过道具有关，但我所看到的一切都向我表明，道具的传球是正确的。我没有主意了，所以我要试一试

以下是父代码：

import React, {useEffect, useState} from 'react'
import Catalogitems from './Catalogitems.jsx'


function Catalog() {
  const [books, setbooks] = useState([])
  const url = "http://localhost:3001/api/books/"

  const getData = () =>
    fetch(url)
    .then((res) => res.json())

    useEffect(() => {
      getData().then((data) => setbooks(data))
    },[])
 


  return (
    <div>
    
      {books.map(item => <Catalogitems props={item} />)}

    </div>
  )
}

export default Catalog

---

尝试使用spread传递整个阵列/对象

此处传递的是一个名为“道具”的道具：

您可以在参数中对其进行分解，如下所示：

function Catalogitems({props: {title, author, ISBN, genre_id,front_cover_image}}) {

{books.map(item => <Catalogitems {...item} />)}

但是（正如@Pauline所指出的）一个更简单的解决方法是将你的

物品

分散到多个道具中，如下所示：

function Catalogitems({props: {title, author, ISBN, genre_id,front_cover_image}}) {

{books.map(item => <Catalogitems {...item} />)}

---

另请注意，通常用大写的新词来命名变量，例如

CatalogItems

或

setBooks

谢谢。我尝试了这两种方法，都取得了成功，尽管我也承认我读了波琳的答案，而且做得不对。在我意识到这个错误后，我去试了试，结果成功了。老实说，这让我很困惑。为什么会这样？我没有将[…项]指定为要通过使用props=传递的道具。再次感谢你的帮助。现在可以了。你必须记住，所有的JSX最终都会转换成Javascript，在Javascript中，道具只是另一个对象，由JSX属性组成。以这种方式使用spread操作符时，它会将对象的属性“扩散”为

道具上的单个属性。。。也就是说，成为个人
道具
.P.S。请不要忘记接受最好的答案，并投票选出任何有用的答案：）
function Catalogitems({props: {title, author, ISBN, genre_id,front_cover_image}}) {

{books.map(item => <Catalogitems {...item} />)}

function Catalogitems({title, author, ISBN, genre_id,front_cover_image}) {