时间戳

首页 > 解决方案 > 仅在打开 Modal 时如何在 React Modal 中触发 API？

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

问题描述

我正在我的组织中开发基于 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]);

标签： javascriptreactjstypescriptreact-bootstrapreact-modal

解决方案

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

如果模态显示，您只想获取。尝试将您的呼叫包装fetchData在一个条件中：

if (show) {
    fetchData();
}

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

推荐阅读