FAQ 容器在点击时不显示

Question

我正在做一个盖茨比项目。我正在尝试制作一个常见问题解答，当您单击问题时，它会向下滑动显示答案。然而，由于某种原因，尽管容器控制台记录了它的点击，但答案总是隐藏的。

这里是javascript：

import React, { useEffect, useState } from "react";
import axios from 'axios'
import * as styles from './style-modules/faq.module.css'
import { Container } from 'react-bootstrap';


const Faq = () => {
  const [faqs, setFaqs] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      console.log("Fetching data...")
      try {
        const result = await axios.get("http://127.0.0.1:8000/faq")
        console.log("Data fetched successfully:", result.data)
        setFaqs(result.data)
      } catch (error) {
        console.error("Error fetching data:", error)
      }
    }

    fetchData()

}, []);

    useEffect(() => {
      const faqButtons = document.querySelectorAll(`.${styles.questions}`)
      console.log(faqButtons)

      const answersContainers = document.querySelectorAll(`.${styles.answers}`);

      faqButtons.forEach((faqButton, index) => {
        const answersContainer = answersContainers[index];

        const computedStyle = window.getComputedStyle(answersContainer);
        const maxHeight = computedStyle.getPropertyValue('max-height');
        console.log(maxHeight);

        if (faqButton == null || faqButton < 0) {
          console.log("No content in container")
        } else {
          console.log("Selecting Container...")
          faqButton.addEventListener("click", () => {
            console.log("Container was clicked!")
            answersContainer.classList.toggle("open");
            console.log("Container was open!")
            console.log(maxHeight)
          });
        }
      });
    }, [faqs]);


   
    

    return (
      <Container>
        {faqs?.map(faq => (
          <div key={faq.questions} className={styles.faq}>
            <div className={styles.questions} >
              <h4>{faq.questions}</h4>
            </div>
            <div className={styles.answers}>
              <p>{faq.answers}</p>
            </div>
          </div>
        ))}
      </Container>
    );
  

  
};

export default Faq;

这是CSS：

.faq_section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}


.faq {
    box-sizing: border-box;
    display: flex;
    align-items: left;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: column;
}

.questions {
    /* font-size: 5vmin; */
    border: none;
    background-color: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: auto;
    padding: 15px;
    border-bottom: 1px solid rgb(184, 184, 184)
}

.questions.active {
    background-color: rgb(207, 233, 237);
}

.questions:hover {
    background-color: rgb(207, 233, 237);
    transition: background-color 0.2s ease-in;
}

.answers {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


  
  .answer.open {
    height: 1000px;
  }

我尝试将控制台日志添加到代码中以查明问题。似乎正在单击容器，但由于某种原因，单击没有切换 .open css 样式，而是最大高度保持为 0，这就是选择答案容器的原因。作为学习经验，我最后的选择是切换到引导程序组件，但现在不想这样做。