Javascript 我的模态触发器按id呈现所有模态，而不是特定模态

我有一个带有视图更多图标的antd表，它会弹出一个模态。图标应该根据表中特定行的id和详细信息呈现每个模态，但目前，每个图标只是将所有模态呈现在彼此之上

const ViewUpload = props => {
    const { visible, onCancel, data, onOk } = props;

    return (
        <>
            {
                data.map(({ description, id, url, title }) => (
                    <Modal
                        key={id}
                        visible={visible}
                        closable={false}
                        onCancel={onCancel}
                        title={title}
                        onOk={onOk}
                    >
                        <Card
                            cover={(
                                <video className="uploaded-video" controls>
                                    <source src={url} />
                                    <track src="name" kind="captions" />
                                </video>
                                )}
                        >
                            <Meta title={title} description={description} />
                        </Card>
                    </Modal>
                ))
            }
        </>
    );
};

然后在渲染模态的组件内部

<ViewUpload
    visible={preview}
    onCancel={() => setPreview(false)}
    data={videos}
    onOk={() => setPreview(false)}
/>

触发此组件内的模态的按钮

<Tooltip placement="top" title="View details">
    <Button
        onClick={() => setPreview(true)}
        type="link"
        icon="eye"
    />
</Tooltip>

// some codes
const { selectedModal, onCancel, data, onOk } = props;
// some other codes
<Modal
   key={id}
   visible={selectedModal === id}
   closable={false}
   onCancel={onCancel}
   title={title}
   onOk={onOk}
>

---

“查看更多”按钮似乎将“预览”状态设置为“真” 所有模态“可见”道具都等于“预览”状态的值，因为您将“预览”状态作为“可见”道具传递给了Viewupload。 因此，当您单击“查看更多”按钮时，它会将“预览”状态设置为true，并将其传递给ViewUpload组件，并且所有模态都在侦听该状态，以便显示该状态

如果你想让模态听特定的按钮， 第一种方法是将模态从viewUpload组件和数据循环中去掉 或者第二种方法是将选定的模式id传递给viewUpload

我不知道“显示更多”按钮是否可以访问已单击行的id 但是如果它在一个循环中，这会改变吗

<Button
  onClick={() => setSelectedModal(modal.id)}
  type="link"
  icon="eye"
/>

因此，该按钮将使模态id处于“selectedModal”状态

然后像这样传下去

<ViewUpload
  selectedModal={selectedModal}
  onCancel={() => setSelectedModal(null)}
  data={videos}
  onOk={() => setSelectedModal(null)}
/>

以及ViewUpload组件中的最终更改

<Tooltip placement="top" title="View details">
    <Button
        onClick={() => setPreview(true)}
        type="link"
        icon="eye"
    />
</Tooltip>

// some codes
const { selectedModal, onCancel, data, onOk } = props;
// some other codes
<Modal
   key={id}
   visible={selectedModal === id}
   closable={false}
   onCancel={onCancel}
   title={title}
   onOk={onOk}
>