React——无论单击哪个元素，都会为映射数组中的每个元素打开模态

Question

所以我正在映射一组项目，并且想为点击的任何一个打开一个独特的模式。出于某种原因，如果我单击任何项目，每个项目都会弹出一个模式。这是我的代码

const PrivateProjects = props => {
    const [show, setShow] = useState(false);

    const openModal = () => {
        setShow(true)
    }

    return (
        <div className='projectContainer'>
            {privateProjects.map((project, index) => (
                <div className='lightbox' onClick={() => {openModal()}}>
                    <div className='project'>
                        <h5>{project.name}</h5>
                        <img src={project.image} alt='hibiscus project' />
                    </div>
                    <MyModal title={project.name} img={project.image} show={show} onHide={()=> {setShow(null)}}/>
                </div>
            ))}
        </div>
    )
}

export default PrivateProjects;

这是 MyModal

import React from 'react';
import Modal from 'react-bootstrap/Modal';
import {Button} from 'react-bootstrap';

const MyModal = (props) => {
    console.log(props);

    return (
      <Modal
        {...props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            {props.title}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <img src={props.img} />
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
            consectetur ac, vestibulum at eros.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }

export default MyModal;

此外，关闭模式的按钮也不起作用，只有转义键起作用。不知道我哪里搞砸了。

P.S。为了可见性，我取出了对象的导入和数组，因为它有很多数据并且工作正常。

Answer 1

这是因为它们都使用相同的 show 状态。

下面的代码类似于执行map后的结构：

<MyModal title={project.name} img={...} show={show} />
<MyModal title={project.name} img={...} show={show} />
<MyModal title={project.name} img={...} show={show} />

因此，当 show 为真时，它们都会打开。

您可以通过为每个模态框使用不同的状态来解决这个问题。

示例：

const [show, setShow] = useState([false,false,false])

<MyModal title={project.name} img={...} show={show[0]} />
<MyModal title={project.name} img={...} show={show[1]} />
<MyModal title={project.name} img={...} show={show[2]} />

<button onClick={()=>setShow([false, false, true])}>Open Modal 3</button>

Answer 2

const PrivateProjects = props => {
    const [show, setShow] = useState([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]);

    const openModal = (index) => {
        handleChanges(index);
    }

    const handleChanges = (index) => {
            // 1. Make a shallow copy of the items
            let items = [show];
            // 2. Make a shallow copy of the item you want to mutate
            let item = items[index];
            // 3. Replace the property you're intested in
            item = true;
            // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
            items[index] = item;
            // 5. Set the state to our new copy
            setShow(items);
    }

    return (
        <div className='projectContainer'>
            {privateProjects.map((project, index) => (
                <div className='lightbox' onClick={() => {openModal(index)}}>
                    <div className='project'>
                        <h5>{project.name}</h5>
                        <img src={project.image} alt='hibiscus project' />
                    </div>
                    <MyModal title={project.name} img={project.image} show={show[index]} onHide={()=> {setShow(false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false)}}/>
                </div>
            ))}
        </div>
    )
}

export default PrivateProjects;

我觉得可能有更简单的解决方案，但这就是它对我有用的原因！

React——无论单击哪个元素，都会为映射数组中的每个元素打开模态

React -- Modal opens for every element in a mapped array, regardless of which one is clicked

bootstrap-modal

reactjs

react-functional-component