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

【问题标题】：Best way to deal with multiple modals with map data in nextJs在 nextJs 中使用地图数据处理多个模式的最佳方法
【发布时间】：2021-07-15 11:37:55
【问题描述】：

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

例如这是我的对象

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 这意味着所有模态都显示，但它都堆叠在同一个地方任何想法如何解决这个问题

【问题讨论】：

标签： javascript reactjs next.js state setstate

【解决方案1】：

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

【讨论】：

还是没有例子？
当我单击 setShowEditModal(list.id) 时，您的意思是在卡片中？在模态中我如何通过 id 进行检查
将 prop id 传递给值为 list.id 的模态，然后在渲染时使用：showModal（将是 id）== id（来自模态的道具）。而且这里不用state，直接从props进去就可以了
@Akw 检查this 示例。