集成api时通过URL传递id时链接标签无法正常工作，有时可以正常工作但有时不能

目暮deep-breaths lv.1

发布时间：2022-05-26 11:52:43 212

相关标签：

我是Nodejs和MongoDB的初学者，在我的react Js应用程序中，当Api集成（使用axios）在一个有选择框的页面中时，我们可以从中选择部门，然后相应的用户将列在一个表中。与每个用户对应的是一个视图链接，当单击它时，将移动到包含用户详细信息的页面。此视图链接存在问题，有时工作顺利，有时在链接上单击两次或两次以上即可工作，有时则无法工作。这里的NodeJS和MongoDB用于后端，我无法找到问题所在，请提供帮助。我在下面展示必要的代码片段。

反应上面页面的Js代码，获取web开发数据

import { Link } from "react-router-dom";
import axios from "axios";

function Hr() {
  //useState  Hooks - api integration

  const [department, setDepartment] = useState("Web Development");
  const [web, setWeb] = useState([]);

 
  let navigate=useNavigate()

  //Taking jwt token to local storage - api integrtaion

  const token =  localStorage.getItem("token");
      

  //Functions to get data of web development department - api integrtaion

  const getWebUsers = () => {
    return axios({
      method: "GET",
      url: `http://localhost:4000/api/users/getWeb`,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }).then((res) => {
     
      setWeb(res.data);
    });
  };
  
   function SelectedTable(props) {
    const { value } = props;

    if (value === "Web Development") {
      {
        getWebUsers()
      }

      return (
        <div className={classes.tablebox}>
          <table className="uk-table" style={{ margin: 100 }}>
            <thead name="list1">
              <tr>
                <th>SL No.</th>
                <th>Employee Name</th>
                <th>Status</th>
              </tr>
            </thead>

            {/* mapping data of useState hook web
          to get interns of web development  */}

            <tbody>
              {web.map((web, index) => (
                <tr key={web._id}>
                  <td>{index + 1}</td>
                  <td>{web.name}</td>
                  <td >
                    **<Link
                      to={`/view/${web._id}`}
                      style={{ textDecoration: "none" }}
                    > View
                    </Link> **
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );
    }

这是NodeJS中的API定义

router.get("/getWeb", async (req, res) => {
  try {
    
    const a3 = await User.find({ department: "Web Development" });
    res.json(a3);
  } catch (err) {
    res.send("Error occurred" + err);
  }
});

点击查看链接一段时间后，

有时它会给出这样的错误：在当前页面中找不到节点。

有时像这样：你应该在 React.useEffect() 中调用 navigate()，而不是在你的组件第一次渲染时。

import React from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Header from '../components/header/header'
import Footer from "../components/footer/footer";
import Hr from '../pages/hr/hr';
import View from '../pages/view/view';


export default function Navigate() {
    return (
        <Router>
            <div>
              {/*<div><Header/></div> */}  
                <Routes>
                    
                    <Route path="/hr/:userId" element={<Hr />}></Route>
                    <Route path="/view/:userId" exact element={<View />}/> 

                </Routes>
                <div><Footer/></div>
            </div>
        </Router>

    );
}

这是指定路由的 navigate.js 代码

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。