Javascript setState 更新组件 React 的所有实例

我正在try 创建一个Quizlet学习类的应用程序，我有多个Card组件的实例.我对它进行了设置，因此当我在其中一张卡片上 Select 答案时，它会根据我 Select 的内容更新状态和显示.底部有换卡按钮.问题是，当我在卡片上 Select 答案时，每个卡片组件的状态都会更新，并且showAnswer被设置为真.我如何防止这种情况发生，并使其只更新同一张卡？

我的卡组件:

export default class Card extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            option_correct: Math.random() > 0.5,
            showAnswer: false,
            optionPicked: 0
        }
    }

    handleClick(optionPicked) {
        console.log(this.state.showAnswer);
        console.log(this.props.prompt + ' 1');
        if (!this.props.hidden) {
            if (!this.state.showAnswer)
                this.setState({
                    optionPicked: optionPicked
                });
            this.setState({
                showAnswer: true
            });
        }
    }

    handleKeyPress(event) {
        console.log(prompt + ' 2');
        if (event.key === 'Enter') {
            this.props.onFinish();
            event.preventDefault();
        }
    }

    render() {

        console.log(this.props.prompt + ' ' + this.state.showAnswer);

        return (
            <div className={`card ${this.state.showAnswer ? "show_answer" : ""}`} onKeyDown={this.handleKeyPress}>
                <div className='prompt'>
                    {this.props.prompt}
                </div>
                <small className={'continue'}>
                    Press Enter to Continue...
                </small>
                <div className='options'>
                    <button className={'option ' +
                        (this.state.option_correct ? 'correct' : 'wrong')
                        + ' ' + (this.state.optionPicked === 1 ? 'picked' : 'not_picked')} onClick={() => {
                        this.handleClick(1);
                    }}>
                        {this.state.option_correct ? this.props.answer : this.props.wrongAnswer}
                    </button>
                    <button className={'option ' + (this.state.option_correct ? 'wrong' : 'correct')
                        + ' ' + (this.state.optionPicked === 2 ? 'picked' : 'not_picked')} onClick={() => {
                        this.handleClick(2);
                    }}>
                        {this.state.option_correct ? this.props.wrongAnswer : this.props.answer}
                    </button>
                </div>
            </div>
        );
    }
}

我的卡容器组件:

class CardData {
    constructor(prompt, answer, wrongAnswer) {
        this.prompt = prompt;
        this.answer = answer;
        this.wrongAnswer = wrongAnswer;
    }
}

export default function Cards() {
    const [flashcarddata, setFlashcarddata] = useState([]);
    const [current, setCurrent] = useState(0);

    useEffect(() => {
        setFlashcarddata([
            new CardData('word1', 'correct', 'incorrect'),
            new CardData('word2', 'correct 2', 'incorrect 2'),
            new CardData('word3', 'correct 23', 'incorrect 23')
        ])
    }, []);

    const cards = flashcarddata.map((card, index) => {
        return <Card
            prompt={card.prompt}
            answer={card.answer}
            wrongAnswer={card.wrongAnswer}
            hidden={current !== index}
            onFinish={() => {
                console.log('finished ' + card.prompt);
                nextCard();
            }}
        />;
    });

    function previousCard() {
        setCurrent(current - 1);
    }
    function nextCard() {
        setCurrent(current + 1);
    }

    const loading = <div className="loading">Loading card...</div>;

    return (
        <div>
            {flashcarddata && flashcarddata.length > 0 ? cards[current] : loading}

            <div className="nav">
                {current > 0 ? (
                    <button onClick={previousCard}>Previous card</button>
                ) : (
                    <button className="disabled" disabled>
                        Previous card
                    </button>
                )}
                {current < flashcarddata.length - 1 ? (
                    <button onClick={nextCard}>Next card</button>
                ) : (
                    <button className="disabled" disabled>
                        Next card
                    </button>
                )}
            </div>
        </div>
    );
}

到目前为止，我已经try 将Card从函数组件更改为一个类，使handleClick方法仅在卡是正在显示的那张卡的情况下工作，并从呈现每一张卡并将其中大多数在CSS中设置为display: block改为一次只呈现一张卡.