为什么我的卡只翻转一次就停止工作了

Question

import React, { useState, useEffect } from "react";
import FlashCard from "../components/flashCard";
function Study() {
const globalStarred = [];
const fakeData = [
{
term: "Random Name #1",
definition: "def1",
starred: "true",
},
{
term: "Random Name #2",
definition: "def2",
starred: "true",
},
{
term: "Random Name #3",
definition: "def3",
starred: "false",
},
{
term: "Random Name #4",
definition: "def4",
starred: "true",
},
{
term: "Random Name #5",
definition: "def5",
starred: "true",
},
{
term: "Random Name #6",
definition: "def6",
starred: "false",
},
];
const [flipped, setFlipped] = useState(false);
const [cardIndex, setCardIndex] = useState(0);
const [currentCard, setCurrentCard] = useState(fakeData[0]);
const [starred, setStarred] = useState(false);
//data
//have one card on the screen, switch the data in the card
const nextCard = () => {
console.log("next card");
};
const prevCard = () => {
console.log("prev card");
};
const flip = () => {
setFlipped(!flipped);
};
const handleKeyDown = (event) => {
const key = event.key;
if (key == "f") {
flip();
}
};
useEffect(() => {
setCurrentCard(fakeData[cardIndex]);
}, [cardIndex]);
// Add event listeners
useEffect(() => {
window.addEventListener("keydown", handleKeyDown);
// Remove event listeners on cleanup
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, []);
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<div onClick={() => flip()}>
<FlashCard
width={300}
height={300}
front={currentCard.term}
back={currentCard.definition}
flipped={flipped}
starred={currentCard.starred}
/>
</div>
</div>
);
}
export default Study;

我第一次按f键时它就起作用了，但之后就没用了。我认为这可能是因为状态没有立即更新。我正在屏幕上显示一张卡片。当我点击f键(或点击卡片(时，我想更新状态并将其更改为！翻转。这将导致页面重新渲染，组件使用更新的翻转布尔值重新渲染。请帮我解决这个问题！！

Answer 1

所以您有一个flip函数，它绑定到一个事件。

效果是翻转状态。因此，它会检查翻转状态是否为假，如果是，它会将翻转状态设置为真，从而翻转它。CCD_ 1在这种情况下也将起作用。

然后进行重新渲染，翻转状态设置为!flipped。

<div onClick={() => flip()}>
<FlashCard
width={300}
height={300}
front={currentCard.term}
back={currentCard.definition}
flipped={flipped}  //<<--- THIS MIGHT BE THE PROBLEM!!!<<<-- Needs changing to !flipped once flipped = true...
flipped={flipped}
starred={currentCard.starred}
/>
</div>

但你不能这样做，所以你必须获得翻转状态并将其传递下去。

const flip = () => {
setFlipped(!flipped);
};

您可以使用一个函数来根据某个参数更改状态的值。因此，您可以让它查看该事件，看看它是否是keydown事件，如果是，则使用setFlipped更改状态。

这个函数不会重新渲染，但这很好，因为它没有绑定到元素，只是一个监听器。如果你想一直监听点击，请将一个空数组传递到useEffect中，而不是[]作为你的第二个参数，并添加一个对你想将监听器附加到的任何元素的引用。每当这个组件渲染时，都会调用ref，这正是我们在这里想要的：根据我们是否点击来不断更新我们的点击状态。

以下是我的想法：

jsx import React, { useState } from "react"; 
import FlashCard from "../components/flashCard"; 
const Study = () => { 
const globalStarred = []; 
const fakeData = [ 
{ term: "Random Name #1", definition: "def1", starred: "true" }, 
{ term: "Random Name #2", definition: "def2", starred: "true" }, 
{ term: "Random Name #3", definition: "def3", starred: "false" }, 
{ term: "Random Name #4", definition: "def4", starred: "true" }, 
{ term: "Random Name #5", definition: "def5", starred: "true" }, 
{ term: "Random Name #6", definition: "def6", starred: null } 
]; 
const [flipped, setFlipped] = useState(false); 
const [cardIndex, setCardIndex] = useState(0); 
const [currentCard, setCurrentCard] = useState(fakeData[0]); 
const nextCard = () => {
if (cardIndex + 1 < fakeData.length) 
setCardIndex(cardIndex + 1); 
}; 

const prevCard = () => { 
if (cardIndex - 1 >= 0) 
setCardIndex(cardIndex - 1); 
}; 
const flip = () => {setFlipped(!flipped)};  
const handleKeyDown = (event) =>{
const key=event.key;
if (key==="f"){
flip()
}
}; 
useEffect(()=>{
setCurrentCard(fakeData[cardIndex]);
},[cardIndex]);
window.addEventListener("keydown",handleKeyDown); 
return <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}> <div onClick={() => flip()}> <FlashCard width={300} height={300} front={currentCard.term} back={currentCard.definition} flipped={flipped} starred={currentCard.starred === "true"} /> </div> <button onClick={prevCard}>Prev</button> <button onClick={nextCard}>Next</button></div>; 
}; 
export default Study;