javascript - Reactstrap Collapse 在 React 组件中不起作用

Question

我一直在尝试让我的 React 组件与 Collapse 一起使用，但我似乎无法让我的组件正确折叠。现在它会在单击 div 时暂时折叠，但它会自动重新打开，实际上不会折叠任何所需的信息。该组件采用多个“模块”并将它们变成自己的卡片。我尝试使用按钮而不是 div 作为“onClick”，并尝试使用和不使用 reactstrap Card 和 CardBody 组件。

我在想 useState 钩子不知何故迷失了我的其他道具？任何帮助，将不胜感激。

import React, { useState } from "react";
import { Container, Collapse, Card, CardBody } from "reactstrap";
import ReplayCard from "./ReplayCard";
import AttachmentCard from "./AttachmentCard";

const ModuleCard = (props) => {
    const module = props.cardID;
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => setIsOpen(!isOpen);
  return (
    <div className="moduleCard">
      <div onClick={toggle}>
        <h2>{module.m_title}</h2>
        <h5>Replay Date: {module.m_date}</h5>
      </div>
      <Collapse isOpen={isOpen}>
        <h5>
          {module.m_description}
        </h5>
        <h3>{module.m_title} Video(s)</h3>
        <Container className="ReplayCard" fluid={true}>
          {module.m_replay &&
            module.m_replay.map((value, index) => {
              return (
                <ReplayCard
                  key={index}
                  cardID={index}
                  video={value.video}
                  text={value.text}
                />
              );
            })}
        </Container>
        <h3>{module.m_title} Link(s)</h3>
        <Container className="AttachmentCard" fluid={true}>
          {module.m_attachment &&
            module.m_attachment.map((value, index) => {
              return (
                <AttachmentCard
                  key={index}
                  cardID={index}
                  text={value.text}
                  link={value.link}
                />
              );
            })}
        </Container>
      </Collapse>
    </div>
  );
};

export default ModuleCard;

当将console.log 插入togged 时，useState 似乎确实从true 变为false，但实际上并未触发任何更改。

标签： javascriptreactjsreact-reduxreactstrap