Javascript TypeError:无法将未定义或null转换为react中的对象

我正在尝试使用以下代码向屏幕呈现一个简单的HTML表：

import { useEffect, useState } from "react";
import "./App.css";
import { getAllBooks } from "./services/bookService";

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    const loadBooks = async () => {
      try {
        const response = await getAllBooks();
        console.log(response.data.books);
        setBooks(response.data.books);
      } catch (error) {
        console.log(error);
      }
    };
    loadBooks();
  }, []);

  return (
    <div className="container">
      <h1>Simple Inventory Table</h1>
      <table>
        <thead>
          <tr>
            <th></th>
            {Object.keys(books[0]).map((item) => {
              return <th key={item}>{item}</th>;
            })}
          </tr>
        </thead>
        
      </table>
    </div>
  );
}

export default App;

但我得到的不是一行列，而是错误：TypeError:无法将未定义或null转换为object

---

这让我感到困惑，因为我曾尝试使用

Object.keys（books[0]）

从输出数组中获取密钥，并且成功了。有人能帮我解决这个问题吗？

因为在渲染时不会加载数据。这将导致尝试访问

书籍[0]

写一个这样的条件

{books.length>0&&
 <tr>
        <th></th>
        {Object.keys(books[0]).map((item) => {
          return <th key={item}>{item}</th>;
        })}
      </tr>
}

{books.length>0&&
{Object.keys（book[0]）.map（（项）=>{
返回{item}；
})}
}

从booksService.js导出books数组以显示所有键

import { useEffect, useState } from "react";
import { getAllBooks } from "./bookService";

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    const loadBooks = async () => {
      try {
        const response = await getAllBooks();
        console.log(response);
        setBooks(response);
      } catch (error) {
        console.log(error);
      }
    };
    loadBooks();
  }, []);

  return (
    <div className="container">
      <h1>Simple Inventory Table</h1>
      <table>
        <thead>
          {books.length > 0 && (
            <tr>
              <th></th>
              {Object.keys(books[0]).map((item) => {
                return <th key={item}>{item}</th>;
              })}
            </tr>
          )}
        </thead>
      </table>
    </div>
  );
}

export default App;

---

在初始渲染时，

books[0]

未定义，因为您将初始状态设置为

[]

谢谢！成功了。

import { useEffect, useState } from "react";
import { getAllBooks } from "./bookService";

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    const loadBooks = async () => {
      try {
        const response = await getAllBooks();
        console.log(response);
        setBooks(response);
      } catch (error) {
        console.log(error);
      }
    };
    loadBooks();
  }, []);

  return (
    <div className="container">
      <h1>Simple Inventory Table</h1>
      <table>
        <thead>
          {books.length > 0 && (
            <tr>
              <th></th>
              {Object.keys(books[0]).map((item) => {
                return <th key={item}>{item}</th>;
              })}
            </tr>
          )}
        </thead>
      </table>
    </div>
  );
}

export default App;

    const books = [
  {
    id: 1,
    Title: "Book One",
    Stock: 4,
    ISBN: "9874223457654",
    ImageURL: null,
    Pages: 281,
    createdAt: "2021-04-30T12:57:52.000Z",
    updatedAt: "2021-04-30T13:43:07.000Z",
    AuthorId: 1,
    GenreId: 2
  },
  {
    id: 2,
    Title: "Book Two",
    Stock: 5,
    ISBN: "9825324716432",
    ImageURL: null,
    Pages: 231,
    createdAt: "2021-04-30T12:57:52.000Z",
    updatedAt: "2021-04-30T12:57:52.000Z",
    AuthorId: 3,
    GenreId: 6
  }
];
async function getAllBooks() {
  return books;
}
module.exports = {
  getAllBooks
};