javascript - 地图数组没有被识别，所以页面没有建立

Question

我正在使用 reactjs 为我的妻子制作 bookCatalog，并且在登录页面上我想显示所有已注册的书籍。所以我的代码如下所示，但我得到一个 TypeError: Cannot read properties of undefined (reading 'map') 并且我不知道该怎么做。

保存在 mongodb 上的所有属性的实际书籍数组显示在浏览器的控制台中，但页面未构建。

import React, { useState, useEffect } from 'react'
import { Link, useHistory } from 'react-router-dom'
import { FiEdit, FiTrash2 } from 'react-icons/fi'
import './styles.css'
import logoImage from '../../assets/logo.svg'
import api from '../../services/api'

export default function BookCatalog() {

  const [bookRepository, setBookRepository] = useState([])

  const history = useHistory()

  useEffect(() => {
    api.get('/books').then(response => {
      setBookRepository(response.data.list)
    })
  })

  return (
    <div className="bookCatalog-container">
      <header>
        <img src={logoImage} alt="Catálogo de livros" />
        <span>Catálogo de Livros</span>
        <Link className="button" to="/NewBook">Adicionar novo livro</Link>
      </header>

      <h1>Livros Registrados</h1>
      <ul>
        {bookRepository.map(book => (
          <li>
            <strong>Título:</strong>
            <p>{book.title}</p>
            <strong>Autor:</strong>
            <p>{book.author}</p>
            <strong>Editora:</strong>
            <p>{book.publishingCompany}</p>
            <strong>Ano de Publicação:</strong>
            <p>{book.publicationYear}</p>
            <strong>Edição:</strong>
            <p>{book.edition}</p>
            <button type="button">
              <FiEdit size={20} color="#251FC5" />
            </button>
            <button type="button">
              <FiTrash2 size={20} color="#251FC5" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}```

标签： javascriptreactjs