[英]TypeError: Cannot convert undefined or null to object in react
I am trying to render a simple HTML table to the screen using the following code:我正在尝试使用以下代码将一个简单的 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;
The array of books I get looks like this:我得到的书籍数组如下所示:
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
}
];
But instead of a row of columns, I get the error: TypeError: Cannot convert undefined or null to object.但我得到的不是一行列,而是错误:TypeError: Cannot convert undefined or null to object。
This is confusing to me because I have tried getting keys from the output array using Object.keys(books[0])
and it worked, Link to JS Bin .这让我很困惑,因为我尝试使用Object.keys(books[0])
从 output 数组中获取密钥并且它有效,链接到 JS Bin 。 Can someone help me out with this?有人可以帮我解决这个问题吗?
Because the data would not be loaded at the time of rendering.因为在渲染时不会加载数据。 Which will leads to an exception wile trying to access books[0]
这将导致尝试访问books[0]
Write a condition like this,写这样的条件,
{books.length>0&&
<tr>
<th></th>
{Object.keys(books[0]).map((item) => {
return <th key={item}>{item}</th>;
})}
</tr>
}
Export the books array from booksService.js to display all the keys从 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;
The bookService.js looks like this: bookService.js 看起来像这样:
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
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.