仅在打开 Modal 时如何在 React Modal 中触发 API？

Question

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

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

这是我目前管理的 Modal 组件的代码：

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();
}

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