React.js闪卡应用Set变量函数调用后重置问题求助

核心原因 #

你遇到的问题不是作用域问题，而是组件重新渲染时Set被重新初始化了。React函数组件每次状态更新（比如调用setCard），都会重新执行整个组件函数体，你用var reviewedCards = new Set([])声明的Set，每次渲染都会被重新创建成空集合，之前的记录自然就丢了。另外你changeCard函数里的reviewedCards参数完全多余，点击按钮时根本没传值，导致函数里用的是undefined，反而覆盖了外部的变量。

解决方案 #

用React的useState来保存reviewedCards集合，因为useState会在组件重新渲染时保留状态值。另外注意：Set是引用类型，直接修改原集合React检测不到变化，必须创建新的Set实例来更新状态。

修正后的完整代码 #

import React from "react";
import { useState } from "react";
import FlippableCard from './components/flippable-card.jsx'

const App = () => {
  const cards = [{question: "2+2", answer: "4"}, {question: "3+2", answer: "5"}, {question: "4+5", answer: "9"}]
  // 用useState保存Set，初始为空集合
  const [reviewedCards, setReviewedCards] = useState(new Set());
  const [card, setCard] = useState(0);

  const changeCard = () => {
    // 如果所有卡片都浏览过，清空集合
    if (reviewedCards.size === cards.length) {
      setReviewedCards(new Set());
    }

    // 创建新的Set副本，避免直接修改原状态
    let updatedReviewed = new Set(reviewedCards);
    updatedReviewed.add(card);

    let newCard = card;
    // 随机挑选未浏览过的卡片
    while (updatedReviewed.has(newCard)) {
      newCard = Math.floor(Math.random() * cards.length);
    }

    // 更新当前卡片和已浏览集合
    setCard(newCard);
    updatedReviewed.add(newCard);
    setReviewedCards(updatedReviewed);

    // 调试日志
    console.log("已浏览卡片索引：", Array.from(updatedReviewed));
  }

  return (
    <div className="app">
      <FlippableCard front={cards[card].question} back={cards[card].answer}/>
      <button onClick={changeCard}>切换卡片</button>
    </div>
  )
}

export default App

关键改动点 #

• 把var reviewedCards换成useState来管理集合状态，确保渲染时保留数据
• 移除changeCard函数的reviewedCards参数，避免变量覆盖
• 更新集合时创建新的Set实例，让React能检测到状态变化
• 补全按钮文字，方便用户操作

内容的提问来源于stack exchange，提问作者Nawfal Cherkaoui Elmalki