在 ReactJs 中的每个动态手风琴中打印消息

Question

我在 ReactJs 中有一个动态手风琴。我从后端收到消息。但它印在每一架手风琴上。我正在分享代码

import React, { useState, useEffect } from "react";

import ApplicantDash from "./ApplicantDash";
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
} from "@material-ui/core";
import * as FcIcons from "react-icons/fc";

import ApplicantService from "../services/ApplicantService";

export default function AvailJobs() {
  const [aplcntEmail, setAplcntEmail] = useState("aman@gmail.com"); //change to aplcntemail
  const [isShow, setIsShow] = useState(false);
  const [msg, setMsg] = useState([""]);
  const [job, setJob] = useState([
    {
      jobTitle: "",
      dateOfPosting: Date,
      lastDateToApply: new Date().toLocaleDateString([], {
        year: "numeric",
        month: "long",
        day: "numeric",
      }),
      preferableSkills: [],
      requiredExp: 0,
      recruiterEmail: "",
      companyName: "",
      companyAddress: "",
      
    },
  ]);

  useEffect(() => {
    const data = ApplicantService.getAllJobs()
      .then((response) => {
        console.log(response.data);
        setJob(response.data);
      })
      .catch((error) => {
        alert(error.response.data);
      });
  }, []);

  const onApplyButton = (item,key) => {
     const data2 = ApplicantService.applyForJob(aplcntEmail, item)
      .then((response) => {
        console.log(response.data);
        setIsShow(true);
        setMsg(response.data)
    
      })
      .catch((error) => {
        setIsShow(true);
        setMsg(error.response.data);
        
      });
  };
  return (
    <div>
      <ApplicantDash />
      <div className="container bg-light">
        <div className="card-bodies">
          <section className="mb-4">
            <h2 className="h1-responsive font-weight-bold text-center my-4">
              All Available jobs
            </h2>
          </section>
          {job.map((item, key) => (
            <>
            
              <Accordion key={key}>
                <AccordionSummary
                  expandIcon={<FcIcons.FcExpand />}
                  aria-controls="panel1a-content"
                  id="panel1a-header"
                  className="Accordian"
                >
                  <Typography>
                    <div className="d-flex p-1 justify-content-evenly">
                      <div className="p-1">
                        <b> Job: </b> {item.jobTitle}
                      </div>
                      <div className="p-2"></div>
                      <div className="p-1">
                        <b> Company: </b> {item.companyName}
                      </div>
                      <div className="p-2"></div>
                      <div className="p-1">
                        <b> Last Date: </b> {item.lastDateToApply}
                      </div>
                    </div>
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography>
                    <div className="container">
                      <table class="table table-borderless">
                        <tbody>
                          <tr>
                            <td>JOB TITLE</td>
                            <td>:</td>
                            <td>
                              <b>{item.jobTitle}</b>
                            </td>
                          </tr>
                          <tr>
                            <td>Company</td>
                            <td>:</td>
                            <td>
                              <b>{item.companyName}</b>
                            </td>
                          </tr>
                          <tr>
                            <td>Address</td>
                            <td>:</td>
                            <td>
                              <b>{item.companyAddress}</b>
                            </td>
                          </tr>
                          <tr>
                            <td>Last Date to Apply</td>
                            <td>:</td>
                            <td>
                              <b>{item.lastDateToApply}</b>
                            </td>
                          </tr>
                          <tr>
                            <td>Experience</td>
                            <td>:</td>
                            <td>
                              <b>{item.requiredExp}</b>
                            </td>
                          </tr>
                          <tr>
                            <td> Skills </td>
                            <td>:</td>
                            <td>
                              <table className="table table-condensed w-auto table-borderless table-hover">
                                {item.preferableSkills.map((S, index1) => {
                                  return (
                                    <tbody key={index1}>
                                      <td scope="col">
                                        {index1 + 1}.<b>{S}</b>
                                      </td>
                                    </tbody>
                                  );
                                })}
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                            <td>
                              <button
                                type="button"
                                class="btn btn-primary"
                                onClick={() => onApplyButton(item,key)}
                              >
                                Apply for the job{" "}
                              </button>
                            </td>
                          </tr>
                        </tbody>
                          {isShow && <> 
                            {msg}
                         </>}
                      </table>
                    </div>
                  </Typography>
                </AccordionDetails>
              </Accordion>
            </>
          ))}
        </div>
      </div>
    </div>
  );
}

现在，当我点击“申请这份工作”按钮时。我从后端获得的消息仅打印到 Active accordion 这里有一些图片可能会有所帮助。

enter image description here

如您所见，后端的响应打印在手风琴的两个部分

Answer 1

问题

这里的问题是您有一个布尔 isShow 状态和一个 msg 状态，并且 all 手风琴细节部分使用相同的单个 isShow 状态来有条件地呈现 msg 状态。

解决方案

一个简单的解决方案是存储手风琴的 ID、标题或索引以显示消息。

示例：

export default function AvailJobs() {
  ...

  const [isShow, setIsShow] = useState({}); // <-- initially empty object

  ...

  const onApplyButton = (item, key) => {
    ApplicantService.applyForJob(aplcntEmail, item)
      .then((response) => {
        console.log(response.data);
        setMsg(response.data);
      })
      .catch((error) => {
        setMsg(error.response.data);
      })
      .finally(() => {
        setIsShow(show => ({
          ...show,
          [key]: true // <-- set true the specific key
        }));
      });
  };

  return (
    <div>
      ...
          {job.map((item, key) => (
            <Accordion key={key}>
              ...
              <AccordionDetails>
                <Typography>
                  <div className="container">
                    <table class="table table-borderless">
                      <tbody>
                        ...
                        <tr>
                          ...
                          <td>
                            <button
                              type="button"
                              class="btn btn-primary"
                              onClick={() => onApplyButton(item, key)}
                            >
                              Apply for the job
                            </button>
                          </td>
                        </tr>
                      </tbody>
                      {isShow[key] && <>{msg}</>} // <-- check if isShow[key] is truthy
                    </table>
                  </div>
                </Typography>
              </AccordionDetails>
            </Accordion>
          ))}
      ...
    </div>
  );
}

在 ReactJs 中的每个动态手风琴中打印消息

Message prints in every Dynamic Accordion in ReactJs

reactjs

react-hooks

问题

解决方案