Reactjs 按钮onClick打开所有图像预览，而不是一个

我想知道如何打开一个项目（在我的情景图像库中），但不是一次打开所有项目。 我正在使用FsLightbox依赖项。我的代码似乎一直在工作，直到我触发按钮打开图像库，但它会打开所有三列

index.js

import React, { useState } from 'react';

import Menu from './Menu';
import Button from './Button';
import data from './Data';
import './style.css';

const allCategories = ['Visi', ...new Set(data.map(item => item.category))];


const Projects = () => {


    const [menuItem, setMenuItem] = useState(data);
  const [buttons, SetButtons] = useState(allCategories);
  // console.log(data);

  const filter = (button) => {
    if(button === 'Visi'){
      setMenuItem(data);
      return;
    }
    const filteredData = data.filter(item => item.category === button);
    setMenuItem(filteredData);
  }

    return (
        <div id="projects" className="App">
        <div className="title">
            Projektai
        </div>
        <Button button={buttons} filter={filter}/>
        <Menu menuItem={menuItem}/>
      </div>
    )
}

export default Projects

和main Menu.js文件

import React, { useState } from 'react';
import FsLightbox from 'fslightbox-react';
import {Animated} from "react-animated-css";

function Menu({menuItem}) {

    const [toggler, setToggler] = useState(false);
    
    return (
        <div className="item">
            {
            menuItem.map((item) => {
                    return  <div className="item-con" key={item.id}>
                        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
                            <div className="item-container">
                                <img src={item.image} alt=""/>
                                <h2>{item.title}</h2>
                                <p>{item.description}</p>
                                <button onClick={() => setToggler(!toggler)}> Daugiau</button>
                            </div>
                        </Animated>
                    </div>
                })
            }
            {
            menuItem.map((item) => {
                
                return <div>
                    <FsLightbox
                    toggler={toggler}
                    sources={item.projectimages}
                    />
                </div>})
            }
        </div>
    )
}

export default Menu;

import React，{useState}来自“React”；
从“FsLightbox react”导入FsLightbox；
从“react Animated css”导入{Animated}；
功能菜单（{menuItem}）{
const[toggler，setToggler]=useState（false）；
返回(
{
menuItem.map（（项目）=>{
返回
这是因为所有的
FsLightbox
都有一个共享的
切换状态

要解决此问题，您可以创建一个
MenuItem
组件来呈现每个项目，每个项目都有自己的
切换程序
状态。例如：

function Menu({ menuItems }) {
  return (
    <div className="items">
      {menuItems.map(item => <MenuItem item={item} />)}
    </div>
  );
}

function Menuitem({ item }) {
  const [toggler, setToggler] = useState(false);

  return (
    <div className="item">
      <div className="item-con" key={item.id}>
        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
          <div className="item-container">
            <img src={item.image} alt="" />
            <h2>{item.title}</h2>
            <p>{item.description}</p>
            <button onClick={() => setToggler(!toggler)}> Daugiau</button>
          </div>
        </Animated>
      </div>
      <div>
        <FsLightbox toggler={toggler} sources={menuItem.projectimages} />
      </div>
    </div>
  );
}


功能菜单（{menuItems}）{
返回(
{menuItems.map（项=>）}
);
}
函数Menuitem（{item}）{
const[toggler，setToggler]=useState（false）；
返回(
{item.title}
{item.description}

setToggler（！toggler）}>Daugiau
);
}

既然每个
MenuItem
都有自己的本地状态，它们应该根据您单击的按钮单独打开。
非常感谢：）首先，我使用了您的代码，它只显示了一个项目，但我通过删除className=“item”简单地解决了这个问题从MenuItem function div，并将此类名保留在菜单函数上。它似乎工作正常。谢谢：）
function Menu({ menuItems }) {
  return (
    <div className="items">
      {menuItems.map(item => <MenuItem item={item} />)}
    </div>
  );
}

function Menuitem({ item }) {
  const [toggler, setToggler] = useState(false);

  return (
    <div className="item">
      <div className="item-con" key={item.id}>
        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
          <div className="item-container">
            <img src={item.image} alt="" />
            <h2>{item.title}</h2>
            <p>{item.description}</p>
            <button onClick={() => setToggler(!toggler)}> Daugiau</button>
          </div>
        </Animated>
      </div>
      <div>
        <FsLightbox toggler={toggler} sources={menuItem.projectimages} />
      </div>
    </div>
  );
}