如何在React js中将ID传递到navlink中

Question

我正在从数据库中获取详细信息并显示在页面上，我想创建一个编辑按钮，单击该按钮可以以可编辑的形式打开该详细信息。在我的情况下，可编辑表单是（（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;

Answer 1

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

在提供的代码中，您在navlink中使用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;