在对一反应中的对象数组进行映射时，所有模式都会同时打开。

Question

我仍然是相当新的反应，我想知道我如何去确保每一张卡显示正确的数据模式？现在，它正在同时显示所有的调制解调器，并且只显示最后一个。

我已经在下面添加了我的更新代码，但是帮助解决这个问题将是非常感谢的！

// import projects into portfolio
import React, { useState } from 'react';

// react bootstrap imports
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';


const projectData = [
    {
        id: 1,
        name: 'Project 1',
        photo: project1,
        url: 'https://',
        gitHub: 'https://',
        summary: 'Lorem ipsum',
        techSkills: 'abc'
    },
    {
        id: 2,
        name: 'Project 2',
        photo: project2,
        url: 'https://',
        gitHub: 'https://',
        summary: 'Lorem ipsum',
        techSkills: 'abc'
    },
    {
        id: 3,
        name: 'Project 3',
        url: 'https://',
        photo: project3,
        gitHub: 'https://',
        summary: 'Lorem ipsum',
        techSkills: 'abc'
    },
    {
        id: 4,
        name: 'Project 4',
        url: 'https://',
        photo: project4,
        gitHub: 'https://',
        summary: 'lorem ipsum',
        techSkills: 'abc'
    }
];

function Project(props) {


    // useState variables to display modals
    const [showModal, setShowModal] = useState(false);
    const handleClose = () => setShowModal(false);
    const handleShow = () => setShowModal(true);

    return (
        <div className='container'>
            <div className='row'>
                {projectData.map((data) => {
                    return (
                        <div className='col-3 d-flex mb-4' key={data.id}>
                            <Button onClick={handleShow} className="project-card card p-0 border-5 border-dark shadow-lg">
                                <img className='card-img shadow-lg' src={data.photo} alt={data.name} >
                                </img>
                            </Button>


                        </div>
                    );
                })}
                {projectData.map(({id, name, summary, techSkills, url, gitHub}) => {
                    return (
                        <Modal
                            {...props}
                            size="lg"
                            aria-labelledby="contained-modal-title-vcenter"
                            centered
                            show={showModal}
                            onHide={handleClose}
                            key={id}
                        >
                            <Modal.Header closeButton className="border-dark">
                                <Modal.Title className="" id="modal-title">
                                    {name}
                                </Modal.Title>
                            </Modal.Header>

                            <Modal.Body className="container">
                                <p>
                                    {summary}
                                </p>

                                <br />

                                <p>
                                    {techSkills}
                                </p>
                            </Modal.Body>
                            <Modal.Footer className="modal-bg border-dark">
                                <Button id="modal-button" className="" target='_blank' rel='noreferrer' href={url}>View live app here!</Button>
                                <Button id="modal-button" className="" target='_blank' rel='noreferrer' href={gitHub}>
                                    <span className='bi bi-github work-icon'></span>
                                </Button>
                            </Modal.Footer>
                        </Modal>
                    );
                })}
            </div>
        </div>
    );
}

Answer 1

更新后的示例中的状态仍然是布尔值，这要么是假的。如果按下任何按钮，所有调制解调器都会打开。您可以将此状态更改为存储id。当按下按钮设置该项目的id时，当模式关闭时，set状态为未定义。请参阅下面的代码，并进行更改。重要的变化是const handleShow = (id) => setShowModal(id); <Button onClick={()=>handleShow(data.id)} show={showModal === id}

// useState variables to display modals
const [showModal, setShowModal] = useState(undefined);
const handleClose = () => setShowModal(undefined);
const handleShow = (id) => setShowModal(id);

return (
    <div className='container'>
        <div className='row'>
            {projectData.map((data) => {
                return (
                    <div className='col-3 d-flex mb-4' key={data.id}>
                        <Button onClick={()=>handleShow(data.id)} className="project-card card p-0 border-5 border-dark shadow-lg">
                            <img className='card-img shadow-lg' src={data.photo} alt={data.name} >
                            </img>
                        </Button>


                    </div>
                );
            })}
            {projectData.map(({id, name, summary, techSkills, url, gitHub}) => {
                return (
                    <Modal
                        {...props}
                        size="lg"
                        aria-labelledby="contained-modal-title-vcenter"
                        centered
                        show={showModal === id}
                        onHide={handleClose}
                        key={id}
                    >
                        <Modal.Header closeButton className="border-dark">
                            <Modal.Title className="" id="modal-title">
                                {name}
                            </Modal.Title>
                        </Modal.Header>

                        <Modal.Body className="container">
                            <p>
                                {summary}
                            </p>

                            <br />

                            <p>
                                {techSkills}
                            </p>
                        </Modal.Body>
                        <Modal.Footer className="modal-bg border-dark">
                            <Button id="modal-button" className="" target='_blank' rel='noreferrer' href={url}>View live app here!</Button>
                            <Button id="modal-button" className="" target='_blank' rel='noreferrer' href={gitHub}>
                                <span className='bi bi-github work-icon'></span>
                            </Button>
                        </Modal.Footer>
                    </Modal>
                );
            })}
        </div>
    </div>
);