Reactjs 反应-切换css类，但不要重新渲染所有内容

我有一个盖茨比网站，我想用它来展示抽认卡。我在网上找到了多个现有的解决方案，但我想用另一种方式来尝试。然而，我完全被卡住了

所需结果： 一次显示一个随机单词。当用户单击“显示”按钮时，应显示单词的含义

问题： 我可以生成单词的随机组合。但当用户单击“显示”时，会加载一个新的组合，而不是答案。我明白为什么会这样。然而，我不明白如何解决这个问题

我已经试过了（只剩下最基本的部分）：

export const Flashcard=（）=>{
const[flip，setFlip]=useState（false）
常量onButtonClick=（）=>{
setFlip（！flip）
}
设word=words[GenerateRandomNumber（0，words.length-1）]//words是一个包含所有可能组合的数组
返回(
{word[“language1”]}
{word[“language2”]}
作答
)
}
导出默认闪存卡

我觉得自己走上了一条完全错误的道路，但不知道如何解决它。我的逻辑结构应该不同吗？我应该用别的钩子吗？还是别的什么

---

此外，我还希望用户能够说他知道意思（单击按钮“正确”）或不知道（按钮“错误”）。如果正确，则显示一个新词；如果错误，则存储该词以便稍后再次显示。如何触发此逻辑？

我认为您应该添加一个状态来存储拾取的单词

const [word, setWord] = useState("");

当你点击时，你需要得到一个随机单词并存储在

word

useEffect(() => {
    const randomNumber = GenerateRandomNumber(0, words.length - 1);
    const newWord = words[randomNumber];
    setWord(newWord);
}, [flip]); //This useEffect will call everytime when flip change.

作为回报，你可以引用这个词

{word["language1"]}

---

这里有一个

我认为您应该添加一个状态来存储所选单词

const [word, setWord] = useState("");

当你点击时，你需要得到一个随机单词并存储在

word

useEffect(() => {
    const randomNumber = GenerateRandomNumber(0, words.length - 1);
    const newWord = words[randomNumber];
    setWord(newWord);
}, [flip]); //This useEffect will call everytime when flip change.

作为回报，你可以引用这个词

{word["language1"]}

---

下面是一个

尝试将

let word=words..

移动到组件外部尝试将

let word=words..

移动到组件外部