reactjs - React Bootstrap手风琴默认ActiveKey不起作用

Question

我创建了一个沙盒示例来说明问题所在： https ://codesandbox.io/s/react-bootstrap-accordion-14pcp

---

我正在使用 defaultActiveKey 设置手风琴，但无法正常工作。这是我用来在单击项目时设置活动类的代码。useState("2")defaultActiveKey 应该在哪里。

  const [activeId, setActiveId] = useState("2");

  function toggleActive(id) {
    if (activeId === id) {
      setActiveId(null);
    } else {
      setActiveId(id);
    }
  }

然后我像这样渲染它：

  <Accordion defaultActiveKey={activeId}>
    {faq.questions.map((question, index) => {
      return (
        <Card className="rounded-lg mb-3 border-0" key={index}>
          <Accordion.Toggle
            as={Card.Header}
            eventKey={index + 1}
            onClick={() => toggleActive(index + 1)}
            className={activeId === index + 1 ? "active" : null}
          >
            {question.title}
          </Accordion.Toggle>
          <Accordion.Collapse eventKey={index + 1}>
            <Card.Body>
              <p className="text-muted">{question.text}</p>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      );
    })}
  </Accordion>

faq.questions是一个包含一些数据的数组。我还必须为每个索引添加 +1 以{index + 1}使其正常工作，否则第一个手风琴项目不起作用。

有趣的是，如果我在.map()没有动态代码的情况下设置它并执行它们，它可以工作，例如：

  <Accordion defaultActiveKey={activeId}>
    <Card className="rounded-lg mb-3 border-0">
      <Accordion.Toggle
        as={Card.Header}
        eventKey="0"
        onClick={() => toggleActive("0")}
        className={activeId === "0" ? "active" : null}
      >
        Question
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <Card.Body>
          <p className="text-muted">
            Answer
          </p>
        </Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>

标签： reactjsnext.jsreact-bootstrap