显示反应 table 中的数据

Question

我写了这段代码来从后端获取数据并在 table 中显示它。但它向我显示错误。

我不知道我使用的地图函数是对还是错，但这是我在其中学习和实现的。

这是我的代码。

const [comm, setcomm] = useState({
        addcomment: "",
        commdate: "",
        commid: "",
        commtime: "",
    })

    useEffect(() => {
        loadcomment(id);
    }, []);

    const loadcomment = async (id) => {
        const getcomment = await axios.get(`http://localhost:4000/getcomment/${id}`);
        setcomm(getcomment.data)
        console.log(getcomment.data);
    }

    <div className="showcomment">
                        <Table>
                            <TableHead>
                                <TableRow className="tablehead">
                                    <TableCell>Comments</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {
                                    comm.map((com) => (
                                        <TableRow>
                                            <TableCell>
                                                {com.commdate}
                                                {com.addcomment}
                                            </TableCell>
                                        </TableRow>
                                    ))
                                }
                            </TableBody>
                        </Table>
                    </div>

这是我在此显示的错误。请帮我解决它。它表明 map 不是函数。我早些时候遇到过这个问题，但后来它起作用了，但这次它不起作用。请帮我解决这个问题

TypeError: comm.map is not a function
UpdatePage
E:/web_development/Intern project/client/src/pages/UpdatePage/UpdatePage.jsx:266
  263 |         <TableCell>Comments</TableCell>
  264 |     </TableRow>
  265 | </TableHead>
> 266 | <TableBody>
      | ^  267 |     {
  268 |         comm.map((com) => (
  269 |             <TableRow>
View compiled

Answer 1

你第一次渲染它时我假设它会使用这个{ 添加评论： ””，通讯日期：“”，命令：“”，通讯时间：“”， } 对于它的值，它实际上不是一个数组：P，我建议在 table 中使用它之前先控制台记录 comm，并显示 table 或 table 主体，条件渲染

Answer 2

您不能映射（迭代）comm，因为它是一个对象而不是数组。

const [comm, setcomm] = useState({ // see, here you have an object which is not mapable
        addcomment: "",
        commdate: "",
        commid: "",
        commtime: "",
    })

即使您的请求可能会用数组覆盖此对象，您也会在一瞬间尝试映射此对象。

显示反应 table 中的数据

Showing data in react table

javascript

database

frontend

backend

reactjs