React-在迭代中显示/隐藏文本对始终显示所有文本而不是所选元素-为什么？

Question

我反复浏览相应的问题/答案，当我点击一个特定的问题时，我想在再次点击同一个问题时显示答案/并隐藏它。我将特定答案的类从hide改为show（onclick）。但是，单击会显示或隐藏所有问题/答案。我做错了什么？谢谢

import React, {Component} from "react";
import messages from "./messages.js";

class Faq extends Component {
    constructor() {
        super();
        this.state = {show: false};
    }

    handleClick() {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const qa = messages.faqs.category1.map((item, index) => {
            return (
                <div key={index}>
                    <p className="App-intro">
                        <button className="question" onClick={() => this.handleClick()}>{item.question}</button>
                    </p>
                    <p className={!this.state.show ? 'hidden' : 'show'}>{item.answer}</p>

                </div>
            )
        });

        return (
            <div className="App">
                {qa}
            </div>
        );
    }
}   
export default Faq;

问题/答案对象/数组：

export default {
    "faqs": {
        "category 1": [
            {
                "question": "question 1?",
                "answer": "answer 1",
            },
            {
                "question": "question 2?",
                "answer": "answer 2",
            },
            {
                "question": "question 3?",
                "answer": "answer 3",
            }
        ]
        // ...category 2 etc
    }
}

css:

.hidden{
  display: none;
}
.show {
  display: block;
}

Answer 1

你可以这样做。

假设你的问题和答案是成对的。制作一对组件并为切换指定状态。然后将该组件迭代到问题数量的长度。所以，您将不会动态地使用与问题相同的组件，并且每个组件都有自己的状态。

Answer 2

而不是处理类名，你可以渲染/不渲染这样的元素：

{
    this.state.show && <p>{item.answer}</p>
}

你把它放在渲染函数的div中。您还应该在代码中更改一些额外的内容。但这会让你开始。请注意，状态将应用于所有问题，因此您可能需要添加额外的复杂性，例如每个问题的显示状态。