使用 react(-bootstrap) 通过相同的 json 文件填充卡片和模式？

Question

来自 workData 的数据正确填写 <Card></Card>。

<Modal></Modal> 仅填充 workData 的最后一个条目（例如 Test4、Modal4、测试文本 4...）

我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式（对于每张卡片）。

为什么模态框只被 json 中的最后一个属性填充？我如何让它填充整个数组？ 如果可能请解释为什么这不能像现在这样工作。

如果不是很明显我是超新的，我是，任何回复都将不胜感激。泰

cards good

after clicking "Read1" bad, should say Test1, test text 1

在App.js中：import { Works } from "./Works";

在 Works.js 中：import { workData } from "./data";

也在Work.js:

export const Works = () => {
  const [show, setShow] = React.useState(false);
  const onClick = () => setShow(true);
  return (
  <>
    <div className="work-container">
    <Row xs={1} md={2} lg={4} className="g-4">
        {workData.map((data, key) => {
              return (
                    <div key={key}>
                        <Col>
                            <Card>
                                <Card.Img variant="top" src={data.projectImage} />
                                <Card.Body>
                                    <Card.Title>{data.projectTitle}</Card.Title>
                                    <Card.Text>with {data.projectTeam}</Card.Text>
                                    <Button variant="link" onClick={onClick}>
                                    {data.readMore}
                                    </Button>
                                </Card.Body>
                                <Card.Footer>{data.tags}</Card.Footer>
                            </Card>
                        </Col>

                        <Modal
                        show={show}
                        onHide={() => setShow(false)}
                        dialogClassName="modal-95w"
                        >
                            <Modal.Header closeButton>
                            <Modal.Title>{data.projectTitle}</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <Image src={data.projectImage}></Image>
                                <p>
                                  {data.modalText}
                                </p>
                                <Image src={data.modalImage}></Image>
                            </Modal.Body>
                        </Modal>
                    </div>
              );
        })}
    </Row>
    </div>
  </>
  );
}

在data.js中：

export const workData = [
  {
    projectTitle: "Test1",
    modalTitle: "Modal1",
    modalText: "test text 1",
    modalImage: "image",
    readMore: "Read1",
    projectImage: "image",
    projectTeam: "Test1",
    year: "2022",
    link1: "link",
    link2: "link2",
    tags: [
      "#tag1 ",
      "#tag2 "
    ]
  },
...

来自 workData 的数据正确填写 <Card></Card>。

<Modal></Modal> 仅填充 workData 的最后一个条目（例如 Test4、Modal4、测试文本 4...）

我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式（对于每张卡片）。

为什么模态框只被 json 中的最后一个属性填充？我如何让它填充整个数组？ 如果可能请解释为什么这不能像现在这样工作。

cards good

after clicking "Read1" bad, should say Test1, test text 1

Answer 1

您迭代了 Cards 和 Modals 的 workData，但您对所有内容只使用一个状态。您需要做的是还为每个模态框创建一个状态。通常您创建一个数组，其中唯一 ID 作为键和布尔值。我假设 projectTitle 是唯一的：

{
    Test1: false,
    Test2: false,
    Test3: false
}

因为您不知道数据的长度，所以您只是遍历数组，就像您对 Cards und Modals 所做的那样：

 const initialShowState = Object.fromEntries(
    workData.map((data) => [data.projectTitle, false])
  );
  const [show, setShow] = React.useState(initialShowState);

然后您需要创建一个通用回调函数，它获取卡片的 ID 并显示适当的模态框。我简化了逻辑并创建了一个切换函数：

const toggleShow = (id) =>
    setShow((prev) => {
      return { ...prev, [id]: !prev[id] };
    });

最后，当渲染UI并遍历workData时，需要将回调函数应用于Button onClick和Modal onHide事件处理程序并设置显示属性 of Modal:

<Button variant="link" onClick={() => toggleShow(data.projectTitle)}>
...
<Modal
    show={show[data.projectTitle]}
    onHide={() => toggleShow(data.projectTitle)}
    dialogClassName="modal-95w"
>

就是这样。这是工作沙箱：https://codesandbox.io/s/hungry-sunset-t865t3

一些一般提示：

您不需要 Works 中的外部片段，因为您只有一个最上面的元素
如果您在文件中使用 JSX 语法，您的扩展名应该是 .jsx 和 not.js (Works.jsx)
在列表中使用索引作为键是不好的做法。在您的数据中找到一些唯一的 ID

使用 react(-bootstrap) 通过相同的 json 文件填充卡片和模式？

populate cards and modals via same json file using react(-bootstrap)?

react-hooks

bootstrap-modal

react-bootstrap

bootstrap-cards