javascript - 如何避免多次打开模态？

Question

我正在尝试将数据发送到我的模态，但是，一旦打开模态，我就会面临一个问题。正如您在图像中看到的那样，它触发了很多次，但是我的模态不是map我循环以收集从另一个组件发送的信息的功能。

return (
    <>
    {data.map((data) => { return (
    <div className="modal__backdrop">
        <div className="modal__container">
            <div className="modal-header">
                <div className="modal-close" onClick={onRequestClose}>
                    <svg className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path
                            strokeLinecap='round'
                            strokeLinejoin='round'
                            strokeWidth='2'
                            d='M6 18L18 6M6 6l12 12'/>
                    </svg>
                </div>
            </div>
            <div className="job-title-wrapper">
                <div className="job-card-title">{data.tactic_id}</div>
                <div className="job-action">
                    <svg
                        className="heart"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth={2}
                        strokeLinecap="round"
                        strokeLinejoin="round">
                        <path
                            d="M20.8 4.6a5.5 5.5 0 00-7.7 0l-1.1 1-1-1a5.5 5.5 0 00-7.8 7.8l1 1 7.8 7.8 7.8-7.7 1-1.1a5.5 5.5 0 000-7.8z"/>
                    </svg>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth={2}
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="feather feather-share-2">
                        <circle cx={18} cy={5} r={3}/>
                        <circle cx={6} cy={12} r={3}/>
                        <circle cx={18} cy={19} r={3}/>
                        <path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>
                    </svg>
                </div>
            </div>
            <div className="job-subtitle-wrapper">
                <div className="company-name">Patreon
                    <span className="comp-location">Londontowne, MD.</span>
                </div>
                <div className="posted">Posted 8 days ago<span className="app-number">98 Application</span>
                </div>
            </div>
            <div className="explain-bar">
                <div className="explain-contents">
                    <div className="explain-title">Experience</div>
                    <div className="explain-subtitle">Minimum 1 Year</div>
                </div>
            </div>
            <div className="overview-text">
                <div className="overview-text-header">Overview</div>
                <div className="overview-text-subheader">
                    We believe that design (and you) will be critical to the company's success. You
                </div>
            </div>
            <div className="overview-text">
                <div className="overview-text-header">Job Description</div>
                <div className="overview-text-item">3+ years working as a product designer.</div>
            </div>
        </div>
    </div>)
    })}
    </>
);
};

标签： javascriptreactjstypescript