如何正确设置状态以允许 React Bootstrap Modal 处理映射数据？

Question

正在尝试构建 D.R.Y。使用 Bootstrap 5.1.

的 React Bootstrap (v.2.2.3) 词汇表

我带来了我的数据：

import vocData from '../data/vocData'

我的组件：

const VocList = () => {
  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false)

  return (
    <ul className="list-inline">
      {Object.keys(vocData).map((item, key) => (
        <React.Fragment key={key}>
          <li className="list-inline-item voc-item">
            <Button>
              <small>{vocData[item].title}</small>
            </Button>
          </li>

          <Modal
            show={show}
            onHide={handleClose}
            backdrop="static"
            keyboard={false}
            aria-labelledby={`contained-modal-title-${vocData[item].href}`}
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id={`contained-modal-title-${vocData[item].href}`}>
                {vocData[item].title}
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{vocData[item].content}</Modal.Body>
          </Modal>
        </React.Fragment>
      ))}
    </ul>
  )
}

我可以看到我的词汇表正在工作，但是当我单击按钮时我的模式没有出现。我尝试研究并通读：

• how to show react bootstrap modal inside the function

但我找不到答案。

我怎样才能动态设置状态并能够为我的列表中的词汇术语呈现我的模态？

Answer 1

尽量只使用Modal一次，不要多次渲染。无论如何，您一次只能显示一个 Modal。为了清楚起见，我创建了一个子组件。

玩转状态的方法有很多种。这里的初始状态是 null 并隐藏模态。当我们点击按钮时，我们使用一个 vocData 条目设置状态。这也会切换 Modal.

的可见性

最后，当我们再次关闭它时，我们将状态设置为 null。通过这种方式，我们将一个状态用于两个目的 - 控制 Modal 的视觉和渲染并为其保存数据。