仅显示数组中单击的元素并隐藏其他 React

Question

我正在制作一个 Q/A 页面，我收到了可见的问题，当我点击它们时，我会显示从一开始就隐藏的答案。所以我得到了一个对象数组，我 .map() 在 jsx 中显示并显示。效果很好。

但是当我点击一个问题时，它会显示所有答案，而不是只显示我点击的特定问题的答案。

这是我的 JSX：

  <div className="questions">
    {md.questionsArray.map((item, i) => (
      <div
        key={i}
        className="question"
        onClick={() => handleOpen(item.question)} // HERES THE QUESTION I CLICK
      >
        <p>{item.question}</p>
        {openQuestion ? <p>{item.answer}</p> : null} // HERES THE ANSWER THAT IS VISIBLE AFTER CLICK 
      </div>
    ))}
  </div>

这是我的功能：

  const [openQuestion, setOpenQuestion] = useState(false)

  const handleOpen = x => {
    let clickedItem = md.questionsArray.find( // HERE I CAN FIND WHICH QUESTION I CLICK
      item => item.question === x
    )
    console.log('clicked item: ', clickedItem)

    if (openQuestion === false) { // HERE I OPEN AND CLOSE QUESTIONS
      setOpenQuestion(true)
    } else {
      setOpenQuestion(false)
    }
  }

Answer 1

使用问题中的唯一值来确定打开的问题。

const [openQuestion, setOpenQuestion] = useState(null)

{md.questionsArray.map((item, i) => (
      <div
        key={i}
        className="question"
        onClick={() => setOpenQuestion(item.question === openQuestion 
                                       ? null 
                                       : item.question)}>
        <p>{item.question}</p>
        {openQuestion === item.question && <p>{item.answer}</p>} 
      </div>
    ))}