如何在反应JavaScript中将id传递给navlink

Posted 2023-02-14

【中文标题】如何在反应JavaScript中将id传递给navlink

【英文标题】：How to pass id into navlink in react JavaScript

【发布时间】：2020-07-23 22:16:06

【问题描述】：

我正在从数据库中获取详细信息并显示在页面上，我想创建一个编辑按钮，单击后可以以可编辑的形式打开该详细信息。在我的情况下，可编辑表单是 (EMPLOYEEFORM)。

您能否建议如何将 id 传递给编辑按钮，以便按钮可以将数据带到编辑区域。

我有问题。对，我没有将 id 传递给 navlink，但它给了我错误，比如找不到具有此 id 的员工。我是 reactjs 的新手。我尝试传递 id 值，但它不能正常工作，我不太清楚将 id 传递到 navlink 或按钮。您能否建议一些直接代码或有价值的链接，我可以在哪里更新我的知识。

import React,  useEffect, useState  from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import  getEmployeeDetails  from '../../shared/services/apiService';
import  useParams, NavLink, Redirect  from 'react-router-dom';
import  Descriptions , Card , Divider, Row , Col , Button from 'antd';
import  isSuccess  from '../../shared/utils/jsHelper';

import  EditTwoTone  from '@ant-design/icons';
const  Meta  = Card;

const employeeDescription = () => 
    

    const id = useParams();
    const [loading, setLoading] = useState(false);
    const [empName, setEmpName] = useState([]);
    const [empEmail, setEmpEmail] = useState([]);
    const [empPhone, setEmpPhone] = useState([]);

    useEffect(() => 
        if (id) 
            getEmployee();
        
    , [id]);

    const getEmployee = () => 
        setLoading(true);
        getEmployeeDetails(id).then((resp) => 
            if (isSuccess(resp)) 
                const employee = resp.data.data;
                setEmployeeValues(employee);
            
        ).finally(() => setLoading(false));
    ;


    const setEmployeeValues = (employee) => 
        setEmpName(employee.empName);
        setEmpEmail(employee.empEmail);
        setEmpPhone(employee.empPhone);

    ;


    return(
        <div>
            <Card 
                title="Employee Info" 
                extra=[
                    <NavLink to='$routePaths.EMPLOYEEFORM/$employee.id' className="lin">
                        <Button key="1">
                            <EditTwoTone twoToneColor="#000" /> Edit Employee Details
                        </Button>
                    </NavLink>,
                    <NavLink to=routePaths.EMPLOYEES className="lin">
                        <Button key="2">
                            '<<' Back to Employee List
                        </Button>
                    </NavLink>,
                ]
            >
                
                <h6>
                    <strong>Pesonal Details :</strong>
                </h6>
                
                <Divider />
                <Descriptions className="card-tis">
                    <Descriptions.Item label="Name ">empName</Descriptions.Item>
                    <Descriptions.Item label="Email ">empEmail</Descriptions.Item>
                    <Descriptions.Item label="Phone ">empPhone</Descriptions.Item>
                </Descriptions>
                 

            </Card>
        </div>
    );

;



export default employeeDescription;

【问题讨论】：

试试to=`$routePaths.EMPLOYEEFORM/$id`

你必须使用 `` 而不是 '' 来使用模板文字，因为它会插入你的变量。 <NavLink to=`$routePaths.EMPLOYEEFORM/$employee.id` className="lin"> <Button key="1"> <EditTwoTone twoToneColor="#000" /> Edit Employee Details </Button> </NavLink>

【参考方案1】：

您可以将所有状态合并到一个 state 或 employee 中，而不是为每个员工属性维护状态。

在提供的代码中，您在导航链接中使用signle (') 引号而不是backticks。这不会解析变量，你会得到一个像$routePaths.EMPLOYEEFORM/$employee.id这样的纯字符串。

我做了一些更改，请尝试。

import React,  useEffect, useState  from 'react';
import './employees.css';
import routePaths from '../../shared/routePaths';
import  getEmployeeDetails  from '../../shared/services/apiService';
import  useParams, NavLink, Redirect  from 'react-router-dom';
import  Descriptions, Card, Divider, Row, Col, Button  from 'antd';
import  isSuccess  from '../../shared/utils/jsHelper';
import  EditTwoTone  from '@ant-design/icons';
const  Meta  = Card;
const employeeDescription = () => 

  const  id  = useParams();
  const [loading, setLoading] = useState(false);
  const [employee, setEmployee] = useState();

  useEffect(() => 
    if (id) 
      getEmployee();
    
  , [id]);

  const getEmployee = () => 
    setLoading(true);
    getEmployeeDetails(id)
      .then((resp) => 
        if (isSuccess(resp)) 
          const employee = resp.data.data;
          setEmployee(employee);
        
      )
      .finally(() => setLoading(false));
  ;


  return (
    <div>
      <Card
        title="Employee Info"
        extra=[
          <NavLink to=`$routePaths.EMPLOYEEFORM/$employee.id` className="lin">
            <Button key="1">
              <EditTwoTone twoToneColor="#000" /> Edit Employee Details
                        </Button>
          </NavLink>,
          <NavLink to=routePaths.EMPLOYEES className="lin">
            <Button key="2">
              '<<' Back to Employee List
                        </Button>
          </NavLink>,
        ]
      >
        <h6>
          <strong>Pesonal Details :</strong>
        </h6>
        <Divider />
        <Descriptions className="card-tis">
          <Descriptions.Item label="Name ">employee.empName</Descriptions.Item>
          <Descriptions.Item label="Email ">empEmail.empEmail</Descriptions.Item>
          <Descriptions.Item label="Phone ">empPhone.empPhone</Descriptions.Item>
        </Descriptions>

      </Card>
    </div>
  );
;

export default employeeDescription;

【讨论】：

是的，我在我的回答中也提到了同样的事情。

我更正了我的代码.. 但不需要 employee.id ，只需要 id 而我的错误是。