Reactjs 单击图片时无法将动态内容渲染到我的模式

因此，我目前正在建立一个新的投资组合，我想在一开始只显示一张图片来显示我的项目，但当你点击图片时，会弹出一个模式，其中包含关于特定项目的信息。我目前被困在模态的动态内容上。我使用useReducer在点击不同的图片时发送不同的内容，但我只是没有连接正确的点

这段代码是显示图片，点击打开模式，模式被包装在我的状态数据周围。状态由下面代码中定义的道具决定

const DisplayPicture = (props) => {
    const [data, dispatch] = useReducer((state, action) => {
        if (action === props.projectAction) {
        return state
        } 
    }, props.title)
    return (
        <>
        <Modal projectAction={props.projectAction} show={props.show} closed={props.closed} >
            <h1>{data}</h1>
            </Modal>
        <div className={styles.picture} style={{backgroundImage: `url(${props.picture})`}} onClick={() => {props.clicked(); dispatch(props.projectAction)}}>
            <h1 className={styles.text}>{props.title}</h1>
        </div>
        </>
    )
}

const DisplayPicture=（道具）=>{
const[data，dispatch]=useReducer（（状态，动作）=>{
if（action==props.projectAction）{
返回状态
} 
}，道具。标题）
返回(
{data}
{props.clicked（）；分派（props.projectAction）}>
{props.title}
)
}

这是在前面的代码中为我的useReducer定义我的道具的地方。我将每个项目的“projectAction”属性设置为不同的值，该属性在useReducer中用作我的操作，标题属性在useReducer中用作状态。但是，当我单击任何图片并显示模式时，它仅显示模式内容的最后一个组件的标题

对于如何通过单击不同的图片在模态体中呈现不同内容的任何建议，我们将不胜感激

谢谢

-此处是回购协议的链接，如果有帮助的话

 const [show, setShow] = useState(false)

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

    const closeModal = () => {
        setShow(false)
    }

    return (
        <>
            <div className='container'>
                <h1 className={styles.title}>Projects</h1>
                <div className='row'>
                    <DisplayPicture projectAction='project1' show={show} closed={closeModal} picture={bestflix} title='BestFlix' clicked={openModal} />
                    <DisplayPicture projectAction='project2' show={show} closed={closeModal} picture={bestflix} title='Hello' clicked={openModal} />
                    <DisplayPicture projectAction='project3' show={show} closed={closeModal} picture={bestflix} title='Goodbye' clicked={openModal} />
                </div>
            </div>
        </>
    )
}

const[show，setShow]=useState（false）
常量OpenModel=（）=>{
设置显示（真）
}
const closeModal=（）=>{
设置显示（假）
}
返回(
项目
)
}

实际上，您的问题是因为您使用单个

show

变量来控制所有模态，当您单击其中一个时，所有模态都显示出来，只是您只看到了“再见”一个，因为它位于顶部

下面是一个可能的修改（例如，我使用了两个组件）：

const项目=（）=>{
const[showIndex，setShowIndex]=useState（-1）；
常量OpenModel=（ind）=>{
设置显示指数（ind）；
};
const closeModal=（）=>{
设置显示指数（-1）；
};
返回(
项目
OpenModel（1）}
/>
openModal（2）}
/>
);
};

Lifesave！谢谢大家!@马修，不客气。

const Projects = () => {
  const [showIndex, setShowIndex] = useState(-1);

  const openModal = (ind) => {
    setShowIndex(ind);
  };

  const closeModal = () => {
    setShowIndex(-1);
  };

  return (
    <>
      <div className="container">
        <h1 className={styles.title}>Projects</h1>
        <div className="row">
          <DisplayPicture
            projectAction="project1"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 1}
            title="BestFlix"
            clicked={() => openModal(1)}
          />

          <DisplayPicture
            projectAction="project2"
            closed={closeModal}
            picture={bestflix}
            show={showIndex === 2}
            title="Hello"
            clicked={() => openModal(2)}
          />
        </div>
      </div>
    </>
  );
};