javascript - 如何在 React JavaScript 中将 id 传递到 navlink

Question

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

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

我遇到了问题。是的，我已将 id 传递给 navlink，但它给了我错误，例如未找到具有此 id 的员工。我是 reactjs 的新手。我尝试传递 id 值，但它的行为不正常，而且我不太清楚将 id 传递到导航链接或按钮。您能否建议一些直接代码或有值(value)的链接，我可以在哪里更新我的知识。

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

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

在提供的代码中，您在导航链接中使用signle (')引号而不是反引号。这不会解析变量，您将得到一个纯字符串，如 ${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;