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

Question

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

问题：假设我在 table 中列出了 300 个问题，因此有 300 个可点击按钮用于打开模式和调用 API。现在的问题是，每当 table 加载时，它会立即为所有 300 个问题调用 APIs，但我希望每个 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); 证实了我的怀疑，即一旦问题被加载，所有问题的 APIs 都会被调用。如何防止这种情况？如果我需要提供更多详细信息，请告诉我。

EDIT1：接受的解决方案-

这是我对代码所做的更改 post @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。因此，当 table 加载 300 个组件时，API 被提取 300 次！

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

if (show) {
    fetchData();
}

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

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

How to trigger API inside React Modal only when Modal is opened?

javascript

reactjs

typescript

react-bootstrap

react-modal

EDIT1：接受的解决方案-