javascript - Hur man triggar API inuti React Modal endast när Modal är öppnad?

Jag arbetar på ett REACT-baserat webapp POC i min organisation. Det finns en tabell med problem och för varje av dessa problem måste jag tillhandahålla en knapp i tabellen som, när en användare klickar på den, öppnar ett modalfönster, hämtar data för det problemet via ett API-anrop och sedan visar datan i det modalfönstret.

Problemet: Säg att jag har 300 problem listade i den tabellen, därmed finns det 300 klickbara knappar för att öppna modaler och anropa API. Nu är problemet att, när den tabellen laddas, anropas API:erna för alla 300 problem samtidigt, men jag vill att varje API endast anropas när en användare klickar på respektive knapp!

Här är koden för Modal-komponenten som jag har lyckats hittills:

import React, { FunctionComponent, useState, useEffect } from 'react'; // importing FunctionComponent
import { Modal, Button } from 'react-bootstrap';

type IssueReportProps = {
    issueInfo: any
}

const IssueReport: FunctionComponent<IssueReportProps> = ({ issueInfo }) => {
    const issueNumber: string = issueInfo.number;
    const [show, setShow] = useState(false);
    const [diagnosisInfo, setdiagnosisInfo] = useState({});
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    
    useEffect(() => {
        async function fetchData() {
            const res = await fetch("http://api-call/?issuenumber=".concat(issueNumber));
            res.json().then(res => setdiagnosisInfo(res));
        }
        fetchData();
    }, [issueNumber]);

    console.log(diagnosisInfo);
    return (
        <>
            <Button variant="outline-primary" onClick={handleShow} size="sm">
                Diagnosis
            </Button>

            <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
                <Modal.Body>
                    <p>
                        Issue Info: {JSON.stringify(diagnosisInfo)}
                    </p>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>Close</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

export default IssueReport;

The console.log(diagnosisInfo); bekräftar mina misstankar att när problemet är laddat, kallas API:er för alla problem. Hur kan man förhindra detta? Vänligen låt mig veta om jag behöver ge fler detaljer.

REDIGERA1: Accepterad lösning-

Här är ändringen jag gjorde i koden efter @Dykotomees lösning:

// useEffect:
    useEffect(() => {
        async function fetchData() {
            const res = await fetch("http://api-call/?issuenumber=".concat(issueNumber));
            res.json().then(res => setdiagnosisInfo(res));
        }
        // fetchData();
        if (show){
            fetchData();
        }
    }, [issueNumber, show]);

Svar #1

useEffect kallas varje gång komponenten renderas. Därför, när tabellen laddas med 300 komponenter, hämtas API:et 300 gånger!

Du vill bara hämta om modalen visas. Försök att omsluta ditt anrop till fetchData i en villkorssats:

if (show) {
    fetchData();
}

Det är inte optimalt, med tanke på att modalen sannolikt kommer att visas innan hämtningen är slutförd, men du kan justera din kod eller lägga till fler tillstånd för att kompensera.