reactjs - 使用 id 在 reactjs 中显示求职者

Question

我正在尝试制作一个反应应用程序，用户正在申请工作并创建一个报告，该报告将显示已申请该工作的用户的个人资料。我欢迎任何可以给我的想法，因为我想对如何实现它有一个逻辑。

下面是我的代码：DriverCard.js

import React from "react";
import member2 from "../../../dist/images/user2.png";

const DriverCard = ({cardValues}) => {
  return (
    <>
      <div className="col-lg-3 col-md-3 col-sm-4 col-6 p-0 mb-5">
        <div className="text-center">
          <div className="mb-2">
            <img
              src={cardValues ? `${cardValues.location.title}` : member2}
              className="rounded-circle"
              height="85px"
              width="85px"
              alt="members"
            />
          </div>
          <h6 className="mb-0 textHeading">
            {cardValues ? cardValues.name : `John Doe`}
          </h6>
          <span className="text-muted textStyle"> @JohntheD &nbsp; 5h</span>
          <hr
            style={{
              width: "50%",
              marginTop: 4,
              marginBottom: 1,
            }}
          />
          <h6 className="textStyle mt-1">
            {cardValues ? `${cardValues.licenseAge} +years licence` : `NA`}
          </h6>
          <h6 className="textStyle">
            {cardValues ? `${cardValues.experience} +years experience` : `NA`}
          </h6>
        </div>
      </div>
    </>
  );
};

export default DriverCard;

这是应该显示求职者的工作卡和个人资料的报告文件。

import React, { useEffect, useState } from "react";
import {useHistory} from "react-router-dom";
import map from "lodash/map"
import { getSpecificJobCard } from "../../Api/index";
import arrowBack from "../../dist/images/arrowBack.svg";
import DriverCard from "./Job_Components/DriverCard";
import JobCardDetails from "./Job_Components/JobCardDetails";
import NextPageButtons from "../Main/DashBoard_Buttons/NextPageButtons";

const JobDetails = ({jobpostId}) => {
  const [jobCard, setjobCard] = useState([]);

  const history = useHistory();
  console.log("param val",jobpostId);

  useEffect(() => {
    (async () => {
      let jobCardRespData = await getSpecificJobCard(jobpostId);
      setjobCard(jobCardRespData);
      console.log("jobcard response:", jobCardRespData);
    })();
  }, []);

  console.log("resp list ----- ", jobCard);

  return (
    <div className="">
      <div className="col-md-10 m-auto">
        <span style={{ cursor: "pointer" }} className="">
          <img src={arrowBack} alt="" className="img-fluid" />
        </span>
        <div className="row">
          <div className="col-lg-4 mt-5">
            <div className="row">
              {}
              <JobCardDetails job={jobCard} />
            </div>
          </div>
          <div className="col-lg-8 mt-5">
            <div className="row">
              <DriverCard/>
              {/* <DriverCard /> */}
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-lg-12">
            <div className="row">
            </div>
          </div>
        </div>
      </div>
      <div className="col-lg-12 my-3 border-top">
        <NextPageButtons/>
      </div>
    </div>
  );
};

export default JobDetails;

标签： reactjsreact-redux