javascript - 为什么所有手风琴在 ReactJs 中切换在一起？

Question

当我点击+按钮时我有手风琴然后所有手风琴一起打开这里有什么问题？

我的代码：-

const questions = [
    {
        id:1,
        question: 'what is the react one',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
    {
        id:2,
        question: 'what is the react two',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
    {
        id:3,
        question: 'what is the react two',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
    {
        id:4,
        question: 'what is the react two',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
    {
        id:5,
        question: 'what is the react two',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
    {
        id:6,
        question: 'what is the react two',
        answer: 'react is a javascript library for building user interfaces for UI components'
    },
];

const Accordion = () => {
  const [data, setData] = React.useState(questions);
  const [show, setShow] = React.useState(false);

  return (
    <React.Fragment>
      <div style={{ padding: "50px" }}>
        <h2>Arrordion</h2>
        {data.map((curElem) => {
          return (
            <div>
              <div className="main-heading">
                <p
                  style={{ cursor: "pointer" }}
                  onClick={() => setShow(!show)}
                >
                  +
                </p>
                <h3>{curElem.question}</h3>
              </div>
              {show && <p> {curElem.answer}</p>}
              <hr />
            </div>
          );
        })}
      </div>
    </React.Fragment>
  );
};

ReactDOM.render(<Accordion/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

谢谢你！

标签： javascriptreactjs

Answer 1

问题在于状态。当您单击任何手风琴时，状态将变为真，并且由于您在所有手风琴上使用了相同的状态，所有这些都变为真并因此打开。

解决方案可能是将您的状态定义为一个数组：

const [show, setShow] = useState([])

你的功能可能是这样的；

{data.map((curElem, i ) => {
      return (
        <div>
          <div className="main-heading">
            <p
              style={{ cursor: "pointer" }}
              onClick={() => setShow(prevState => prevState[i] = !prevState[i])}
            >
              +
            </p>
            <h3>{curElem.question}</h3>
          </div>
          {show[i] && <p> {curElem.answer}</p>}
          <hr />
        </div>
      );
    })}