http://localhost:3000/getalldata/undefined 404（未找到）

Question

在从后端获取数据到前端时再次遇到错误，不知道哪里错了，请尝试修复我的错误，如果您有任何疑问，请随时询问。

注意 :: 我的 adddata 操作工作正常

用户数据.js

这是我的 react js 部分，我想从后端获取数据，并且正在使用 axios 获取数据

import React, { useEffect, useState } from "react";
import { Link,useParams } from "react-router-dom";
import Axios from 'axios';

const UserData = () => {
  const [users, setUser] = useState([{
    title : "",
    description : ""
  }]);
  
  const {id} = useParams();

  useEffect(() => {
    AllUsers();
  }, []);

  const AllUsers = async (id) => {
    const res = await Axios.get(`http://localhost:3000/getalldata/${id}`);
    console.log(res.data);
    setUser(res.data)
  };

  return (
    <div>
      <div className="container">
        <table className="table table-hover table-bordered mt-5">
          <thead>
            <tr>
              {/* <th scope="col">No</th> */}
              <th scope="col">Title</th>
              <th scope="col">Details</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr key={index}>
                <th scope="row">{user.id}</th>
                <td>{user.title}</td>
                <td>{user.description}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default UserData;

用户数据/路线

这是我的路线文件

const express = require("express");
const route = express.Router();

const {
  getallData,
  addData,
  getDataById,
  deleteData,
  editData,
} = require('../controller/userdata');

route.get("/getalldata", getallData);
route.post("/adddata", addData);
route.get("/:id", getDataById);
route.delete("/:id", deleteData);
route.put("/editData/:id", editData);

module.exports = route;

App.js

我添加了相互链接的 App.js 文件。

import "./App.css";
import Home from "./components/Home";
import Login from "./components/Login";
import Navbar from "./components/Navbar";
import Register from "./components/Register";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import UserData from "./components/UserData";
import AddData from "./components/AddData";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="App">
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/signup" element={<Register />} />
          <Route exact path="/signin" element={<Login />} />
          <Route exact path="/getalldata" element={<UserData />} />
          <Route exact path="/adddata" element={<AddData/>} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Answer 1

当您不传递任何参数时，您在使用getParams() 时不会获得任何值，因此它将返回未定义并存储到id 变量中。

localhost:3000/getalldata

如果您的所有数据的终点看起来像这样，那么您可以避免 /${id} 从 url 获取请求，就像您在示例代码中所做的那样。