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

Question

嗨，我尝试将 map 数据与模态一起使用。 我为所有模态设置了 state，但是在我使用 map 数据数组 object 之后。 我有模态显示重复的问题。 抱歉，我认为我的解释不清楚，所以我将在下面向您展示我的代码

例如这是我的 object

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} 中，必须在 1、2、3 中返回，但它全部返回 1，我尝试检查元素，并将 css 样式的 display:none 设置为模态元素，我看到 {list.id} = 2 这意味着所有模态都显示，但它都堆叠在同一个地方任何想法如何解决这个问题

Answer 1

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

Answer 2

有人可以提供有关此主题的更多信息吗？ 我有同样的问题，我无法理解将 id 传递给每个模态的想法，在哪里以及如何传递。 验证并设置 state？