Javascript 钩子useState不是在触发事件处理程序时？

onCardLeftScreen事件处理程序触发控制台日志函数，但不使用setState钩子更新状态？我已经用一个按预期运行的onClick函数测试了这个问题

反应代码：

//在队列中设置初始卡
const[cardQueue，setCardQueue]=useState（[Data[0]，Data[1]，Data[2]]）；
//设置将推入队列的卡的索引
const[cardQueueLength，setCardQueueLength]=useState（Data.length-1）；
常量自动播放更改=（）=>{
设置幻灯片放映（！幻灯片放映）；
console.log（“正在播放！”）；
};
const CardLeftScreen=（）=>{
//迭代卡片（设置循环）
setCardQueueLength(
cardQueueLength{
返回(
{Projects.Images&&
Projects.Images.map（（图像，索引）=>{
返回(
);
})}
{Projects.workName}
{Projects.workTech.map（（Tech，index）=>{
返回(

{Tech}

);
})}
{Projects.workDescription}
);
})}
单击以获取onCardLeftScreen所需功能
);

---

我还设置了一个来更好地显示我的问题，希望有人能找到一个解决方案，我的项目快完成了。使用的API是

每当您在函数中设置状态时，它不会立即更新，只有在事件处理程序退出函数后，您才能看到更改

我认为您的代码是正确的，请在函数之后尝试console log，它将向您显示预期的结果，如果要使用更新的值，请使用如下所示的变量

constcardleftscreen=（）=>{
//迭代卡片（设置循环）
让p=
cardQueueLength

您正在直接变异您的状态数组，而不是复制它并影响该数组。这意味着React并不认为您的阵列实际发生了更改。考虑下面的变化：

const{useState}=React；
常数mockData=[
{标题：“Foo”，描述：“你好，世界！”}，
{标题：“酒吧”，描述：“嘶嘶作响！”}，
{标题：“酷”，描述：“更多东西！”}
];
常量MyComponent=（）=>{
const[cards，setCards]=useState（[mockData[0]，mockData[1]，mockData[2]]）；
const[nextDataIndex，setNextDataIndex]=useState（mockData.length-1）；
const onCardLeftScreen=（）=>{
const newNextDataIndex=nextDataIndex(
{card.title}
{card.description}
))}
左击
);
};
常量应用=（）=>(
);
ReactDOM.render(
,
document.getElementById（“应用程序”）
);
.card容器{
宽度：100px；
高度：100px；
位置：相对位置；
}
.卡片{
背景色：#0000AA；
颜色：#ffffff；
填充：0.2米；
宽度：50px；
高度：50px；
盒影：2px 2px黑色；
位置：绝对位置；
排名：0；
左：0；
}

试试这样的方法。你正在直接改变状态，这是不好的，可能会导致各种副作用和灾难，也许是你可能会连续两次看到同一张牌、滞后等的原因

  // sets initial cards within the queue
  const cards = [ Data[0], Data[1], Data[2] ];
  const [cardQueue, setCardQueue] = useState(cards);
  const [cardQueueLength, setCardQueueLength] = useState(Data.length - 1); //sets the index of card that will be pushed into queue

  const autoplayChange = () => {
    setSlideShow(!slideShow);
    console.log("playing!");
  };

  //iterates through cards(sets up loop)
  const handleCardLeave = () => {
    const newCardQueueLength = cardQueueLength < Data.length - 1 ? cardQueueLength + 1 : 0;
    setCardQueueLength(newCardQueueLength);

    const updatedCardQueue = [...cardQueue]; // don't mutate state directly
    updatedCardQueue.shift(); // removes card from front of queue
    updatedCardQueue.push(Data[cardQueueLength]); // pushes a card to back of queue
    setCardQueue(updatedCardQueue);

    //sets slideshow to true
    setSlideShow(true);

    //console logs cards in arrays and the index of the card being pushed to back of queue
    console.log(cardQueue);
    console.log(cardQueueLength);
  };

//在队列中设置初始卡
常量卡=[数据[0]，数据[1]，数据[2]；
常量[cardQueue，setCardQueue]=使用状态（卡）；
const[cardQueueLength，setCardQueueLength]=useState（Data.length-1）//设置将推入队列的卡的索引
常量自动播放更改=（）=>{
设置幻灯片放映（！幻灯片放映）；
console.log（“正在播放！”）；
};
//迭代卡片（设置循环）
常量handleCardLeave=（）=>{
const newCardQueueLength=cardQueueLength  // sets initial cards within the queue
  const cards = [ Data[0], Data[1], Data[2] ];
  const [cardQueue, setCardQueue] = useState(cards);
  const [cardQueueLength, setCardQueueLength] = useState(Data.length - 1); //sets the index of card that will be pushed into queue

  const autoplayChange = () => {
    setSlideShow(!slideShow);
    console.log("playing!");
  };

  //iterates through cards(sets up loop)
  const handleCardLeave = () => {
    const newCardQueueLength = cardQueueLength < Data.length - 1 ? cardQueueLength + 1 : 0;
    setCardQueueLength(newCardQueueLength);

    const updatedCardQueue = [...cardQueue]; // don't mutate state directly
    updatedCardQueue.shift(); // removes card from front of queue
    updatedCardQueue.push(Data[cardQueueLength]); // pushes a card to back of queue
    setCardQueue(updatedCardQueue);

    //sets slideshow to true
    setSlideShow(true);

    //console logs cards in arrays and the index of the card being pushed to back of queue
    console.log(cardQueue);
    console.log(cardQueueLength);
  };