如何在React js中更改旧状态

Question

我有一个Faq组件列表。当我单击一个问题时，需要显示该特定问题的答案，而所有其他答案都需要隐藏。我的问题是，我有很多问题，当我单击一个问题时，它显示的是所单击问题的答案，但并没有隐藏其他已经打开的答案。

import React, { useState, useEffect } from 'react';

function Faq(props) {
   const [toggle, setToggle] = useState(false);
   return (
      <div>
        <h2 onClick={() => setToggle(true)}>
        <strong>{props.question}</strong></h2>
        {toggle && <p>{props.answer}</p>}   
     </div>
   )

 }

 function Faqs(props) { 
      return (
           <div>
             <Faq question={"Question 1"} answer={"answer 1"} />
             <Faq question={"Question 2"} answer={"answer 2"} />
           </div >
      )
 }

Answer 1

首先，您的setToggle函数仅将切换值设置为true。其次，通过单击特定的[[FAQ组件不会在其余的[[FAQ组件中触发onClick事件。

最佳解决方案是在父组件中保留一个状态变量来存储当前打开的问题，然后为所有

FAQ

组件共同调用一个函数。

import React, { useState, useEffect } from 'react';

function Faq(props) {
   return (
      <div>
        <h2 onClick={() => props.onClick(prop.toggle === props.question ? '' : prop.question)}>
        <strong>{props.question}</strong></h2>
        {(props.toggle === props.question) && <p>{props.answer}</p>}   
     </div>
   )

 }

 function Faqs(props) {
      const [toggle, setToggle] = useState('');
      return (
           <div>
             <Faq
               question={"Question 1"}
               answer={"answer 1"}
               onClick={setToggle}
               toggle={toggle}
             />
             <Faq
               question={"Question 2"}
               answer={"answer 2"}
               onClick={setToggle}
               toggle={toggle}
             />

           </div >
      )
 }