React记忆游戏中限制同时仅允许两张卡片翻开的问题求助

大家好，我正在用React做一个简单的记忆配对游戏，现在遇到个头疼的问题——玩家可以同时翻开超过两张卡片，只翻两张的时候游戏运行完全正常，但翻多了就会出现各种异常情况。

我试过在翻开新卡片前限制openCards的长度不超过2，但没成功；也想过当选中两张卡片后，把所有未翻开的卡片加入disabledCards，但这样会和已经配对成功的卡片混在一起，逻辑上就乱了。

以下是我的代码：

function App() {

const [images, setImages] = useState([]);

const [openCards, setOpenCards] = useState([]);

const [shouldFlipBack, setShouldFlipBack] = useState(false);

const [disabledCards, setDisabledCards] = useState([]);  //cards that are matched

const imageArray = [
{type: "penguin", image: penguin},
{type: "penguin", image: penguin},
{type: "snail", image: snail},
{type: "snail", image: snail},
{type: "chicken", image: chicken},
{type: "chicken", image: chicken},
{type: "raccoon", image: raccoon},
{type: "raccoon", image: raccoon},
{type: "fox", image: fox},
{type: "fox", image: fox}
];

useEffect(() => {
setImages((prevImages) => shuffleImages(prevImages));
}, []);

useEffect(() => {
if (openCards.length === 2) {
checkIfMatch();
setOpenCards([]);
}
}, [openCards]);

function checkIfMatch() {
if (openCards[0] === openCards[1]) {
console.log("match");
setDisabledCards(()=> [...disabledCards, openCards[0]]);
setShouldFlipBack(false);
} else {
console.log("not match");
setTimeout(() => {
setShouldFlipBack(true);
}, 1000);
}
setShouldFlipBack(false);
}

function Card({card, setOpenCards, openCards, shouldFlipBack, disabledCards}) {

const [isFlipped, setFlipped] = useState(false);

useEffect(() => {
if (!disabledCards.includes(card.type)) {
setTimeout(() => {
setFlipped(false);
}, 500);
}
}, [shouldFlipBack]);

function flipCard() {
if (!disabledCards.includes(card.type)) {
setFlipped(!isFlipped);
setOpenCards(()=> [...openCards, card.type]);
}
}

return (
<div className="card" onClick={flipCard}>
<div className={isFlipped ? "card-inner flipped" : "card-inner"}>
<div className="card-front"></div>
<div className="card-back">
{isFlipped && <img src={card.image} alt="card" />}
</div>
</div>
</div>
);
}

export default Card;

备注：内容来源于stack exchange，提问作者user23374839