如何在React JavaScript中将ID传递到NavLink？

Question

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

请问如何将id传递给编辑按钮，以便该按钮可以将数据带到编辑区域。

我遇到了问题。现在我已经将id传递给了导航链接，但它给我带来了错误，提示找不到具有此id的雇员。我是 reactjs 的新手。我尝试传递id值，但它没有正常工作，而且我对将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 [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;

- Raushan Singh

---

尝试使用 to={\${routePaths.EMPLOYEEFORM}/${id}`}`。 - Sarthak Aggarwal

你必须使用模板字面量，使用``而不是''，因为它将插值你的变量。<NavLink to={\${routePaths.EMPLOYEEFORM}/${employee.id}`} className="lin"> <Button key="1"> <EditTwoTone twoToneColor="#000" /> 编辑员工详细信息 </Button> </NavLink>` - aurabliss

Answer 1

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

在提供的代码中，您在navlink中使用的是单引号(')，而不是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;

- Sohail Ashraf

---

是的，正确的，我在我的答案中也提到了同样的事情。 - Sohail Ashraf

我已经纠正了我的代码...但是不需要{employee.id}，只需要{id}，这是我的错误。 - Raushan Singh