Как передать id в navlink в реакции js

Question

Я выбираю детали из базы данных и показываю их на странице, и я хочу создать кнопку редактирования, которая после щелчка может открыть эту информацию в редактируемой форме. в моем случае это редактируемая форма (EMPLOYEEFORM) Подскажите, пожалуйста, как передать идентификатор в кнопку редактирования, чтобы кнопка могла брать данные в область редактирования. У меня проблема. не верно, у меня есть идентификатор для ссылки, но это дает мне ошибку, как сотрудник не найден с этим идентификатором я новичок в reactjs. Я попытался передать значение идентификатора, но он не работает должным образом, и я не очень осведомлен о передаче идентификатора в 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 вместо сохранения состояния для каждого свойства сотрудника.

В предоставленном коде вы используете кавычки 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;