Rendering a Table Axios ReactJS

Question

我试图使用表呈现所有预订的插槽，我怀疑问题是Axios调用，因为我得到"Cannot get/api/get/week1"但我不知道如何测试这个理论或如何检查如果数组实际上包含任何值，任何帮助将非常感激!

function BookingTable() {

useEffect(() => {
Axios.get('http://localhost:3001/api/get/week1').then((response) => {
setIsBooked(response.data)

console.log(response.data);
})
}, []);
const [isBooked, setIsBooked] = useState([])
const renderTableData = () => {
return isBooked.map((val) => (
<tr class>
<td>{val.booked}</td>
</tr>))
}
return (
<table id="table">
<thead>
<tr>
<th>Booked</th>

</tr>
</thead>
<tbody>
{renderTableData}
</tbody>
</table>
)
}
export default BookingTable

Answer 1

你调用的函数不正确，像renderTableData()一样调用它工作演示链接

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";
function BookingTable() {
const [isBooked, setIsBooked] = useState([]);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/posts").then((response) => {
setIsBooked(response.data);
});
}, []);
const renderTableData = () => {
return isBooked?.map((val) => (
<tr class>
<td>{val.id}</td>
</tr>
));
};
return (
<table id="table">
<thead>
<tr>
<th>Booked</th>
</tr>
</thead>
<tbody>{renderTableData()}</tbody>
</table>
);
}
export default BookingTable;