在 nextJs 中使用地图数据处理多个模态的最佳方法

Question

您好，我尝试将地图数据与模式结合使用。我为所有模式设置状态，但在我使用地图数据数组对象之后。我有模态显示重复的问题。抱歉，我认为我的解释不够清楚，所以我将在下面向您展示我的代码

例如这是我的对象

const obj = [
  {
    id:1
    name:"test"
  },
  {
    id:2
    name:"test2"
  },
  {
    id:3
    name:"test3"
  }
]

这是我的模态组件（这只是一个示例模态代码，我没有输入所有类名）

const Modal = ({ children, show = false }) => {
  const [showModal, setShowModal] = useState(show);
  useEffect(() => {
    setShowModal(show);
  }, [show]);

  return showModal ? (
      <div>
        <div className="text-xl">title</div>
        {children}
      </div>
  ) : null;
};

如您在我的模态组件中所见，我发送 props show 以检查它是否为真显示模态否则不显示

当我点击每张卡片时，这是我在这个组件中的 listModal 我想要模态显示每张卡片的 ID

const ListModal = ({}) => {
  const [showEditModal, setShowEditModal] = useState(false);

  return obj.map((list) => {
    return (
      <>
        <Card key={list.id} onClick={() => setShowEditModal(true)}>
          <Modal show={showEditModal}>{list.id}</Modal>
        </Card>
      </>
    );
  });
};

export default ListModal;

问题出在 {list.id} in must return in 1,2,3，但都是 return 1 我尝试检查元素并设置 css 将 display:none 样式化为模态元素，我看到 {list.id} = 2 这意味着所有模态都显示但它们都堆叠在同一个地方知道如何解决这个

Answer 1

你应该尝试在 setShowEditModal() 中使用 id 来匹配模式。

在 nextJs 中使用地图数据处理多个模态的最佳方法

Best way to deal with multiple modals with map data in nextJs

javascript

state

setstate

reactjs

next.js