React用Express获取MySQL用户数据报404，如何在react-material-dashboard展示用户列表

问题排查 #

404报错和后续隐藏的问题共3处：

• Express路由路径缺少前置斜杠，你当前服务端写的是app.get("api/fetchUsers")，没有斜杠的话Express不会匹配到/api/fetchUsers的请求，直接返回404。
• 数据库查询回调参数定义错误，db.query的回调第一个参数是错误对象err，第二个是查询结果result，你现在写成了(req, res)，和外层路由的req/res重名，且未定义err和result，就算路由通了也会报错。
• 若前端和服务端端口不一致，需要提前配置cors跨域中间件，否则请求会被浏览器拦截。

修复步骤 #

1. 修复服务端API代码 #

先执行npm install cors安装跨域中间件，再替换服务端代码：

const cors = require('cors');
app.use(cors()); // 放在所有路由前面开启跨域

//API To Get All Users
app.get("/api/fetchUsers", (req, res) => {
    db.query("SELECT * FROM users", (err, result) => {
        if (err){
            console.log(err)
            res.status(500).send('查询数据库失败')
        }else{
            console.log(result);
            res.send(result)
        }
    });
});

改完重启Express服务。

2. 修复前端代码，渲染用户数据到表格 #

你当前只发起了请求没有存数据，也没有写表体渲染逻辑，修改CustomersListResults.js：

import { useState, useEffect } from 'react';
import PerfectScrollbar from 'react-perfect-scrollbar';
import {
  Box,
  Card,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
} from '@material-ui/core';
import Axios from 'axios';

const CustomerListResults = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(0);
  const [userList, setUserList] = useState([]); // 新增用户列表存储state

  useEffect(() => {
    Axios.get('http://localhost:3001/api/fetchUsers').then((response) => {
      setUserList(response.data); // 存储返回的用户数据
    }).catch(err => {
      console.log('请求用户数据失败', err)
    })
  }, []);

  const handleLimitChange = (event) => {
    setLimit(event.target.value);
  };

  const handlePageChange = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <Card>
      <PerfectScrollbar>
        <Box sx={{ minWidth: 1050 }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Account</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Location</TableCell>
                <TableCell>Phone</TableCell>
                <TableCell>Registration date</TableCell>
                <TableCell>Action</TableCell>
              </TableRow>
            </TableHead>
            {/* 新增表体渲染逻辑 */}
            <TableBody>
              {userList.slice(page * limit, page * limit + limit).map((user) => (
                <TableRow hover key={user.id}>
                  {/* 字段名和你数据库users表的字段保持一致即可，不匹配对应修改 */}
                  <TableCell>{user.account}</TableCell>
                  <TableCell>{user.name}</TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.location}</TableCell>
                  <TableCell>{user.phone}</TableCell>
                  <TableCell>{user.registration_date}</TableCell>
                  <TableCell>{/* 这里可新增编辑、删除等操作按钮 */}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Box>
      </PerfectScrollbar>
      <TablePagination
        component="div"
        count={userList.length} // 分页总长度替换为实际用户数量
        onPageChange={handlePageChange}
        onRowsPerPageChange={handleLimitChange}
        page={page}
        rowsPerPage={limit}
        rowsPerPageOptions={[5, 10, 25]}
      />
    </Card>
  );
};

export default CustomerListResults;

内容的提问来源于stack exchange，提问作者motionless570