如何仅在打开Modal时触发React Modal内部的API？

Question

我正在我的组织中开发基于 REACT 的网络应用程序 POC。有一个问题表，对于每个问题，我必须在表中提供一个按钮，当用户单击该按钮时，它将打开一个模式，通过 API 调用获取该问题的数据，然后将数据广播到那个模态。

问题：假设我在该表中列出了 300 个问题，因此有 300 个可单击按钮用于打开模式和调用 API。现在的问题是，每当该表加载时，它都会立即调用所有 300 个问题的 API，但我希望每个 API 仅在用户单击相应按钮时调用！

这是迄今为止我管理的模态组件的代码：

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;

这console.log(diagnosisInfo);证实了我的怀疑：加载问题后，所有问题的 API 都会被调用。如何防止这种情况发生？如果我需要提供更多详细信息，请告诉我。

EDIT1：接受的解决方案-

这是我对 @Dykotomee 的解决方案后的代码所做的更改：

// 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]);

Answer 1

useEffect每次组件渲染时都会调用。因此，当表加载 300 个组件时，API 会被获取 300 次！

您只想在模式显示时获取。尝试将您的调用包装fetchData在条件中：

if (show) {
    fetchData();
}

这并不理想，考虑到模式可能会在获取完成之前显示，但您可以调整代码或添加更多状态来补偿。