React/Next.js中useState需点击两次才触发事件的问题求解

问题现象 #

在React/Next.js中实现按钮点击逻辑，目标是更新数组状态：移除数组首元素并在末尾添加新元素（例如从["image-id-0","image-id-1","image-id-2","image-id-3"]变为["image-id-1","image-id-2","image-id-3","image-id-4"]）。

• 直接使用JavaScript数组突变方法（arrayClicked.shift()、arrayClicked.push()）时，首次点击即可生效；
• 使用setState更新状态时，却需要点击两次才会触发界面更新。

相关代码 #

状态定义：

const [arrayClicked, setArrayClicked] = useState(["image-id-0", "image-id-1", "image-id-2", "image-id-3"]);

尝试的setState代码：

const newIDImg = "image-id-4"; // 实际为图片真实ID值
setArrayClicked(prev => {
  const prevArray = prev.filter(val => {
    return val !== prev[0];
  });
  return [...prevArray, newIDImg];
});

// 使用slice的写法也存在相同问题
setArrayClicked(prev => [
  ...prev.slice(1, prev.length),
  newIDImg
]);

完整业务逻辑代码：

import { useState } from "react";

// props.product.images长度为13，索引从1到13，设为只读

const [displaySmallerImages, setDisplaySmallerImages] = useState(props.product.images.slice(0, 4));
const [arrayClicked, setArrayClicked] = useState(['image-id-0', 'image-id-1', 'image-id-2', 'image-id-3']);

const handleRightClick = () => {
    // 示例：props.product.images长度为13
    const exampleFakeIndex = 3;
    let newIDImg, tempArray;

    if (props.product.images[exampleFakeIndex + 1] !== undefined) {
        newIDImg = props.product.images[exampleFakeIndex + 1].id;
        // arrayClicked.shift(); // TODO 替换为setArrayClicked
        // arrayClicked.push(newIDImg); // TODO 替换为setArrayClicked
        setArrayClicked(prev => {
            const prevArray = prev.filter(val => {
                return val !== prev[0];
            });
            return [...prevArray, newIDImg];
        });
        // 辅助函数转换为展示用对象数组
        tempArray = helperArrayNewSetOfFours(arrayClicked, props.product.images);
        setDisplaySmallerImages(tempArray);
    } else {
        newIDImg = props.product.images[0].id;
        // arrayClicked.shift(); // TODO 替换为setArrayClicked
        // arrayClicked.push(newIDImg); // TODO 替换为setArrayClicked

        setArrayClicked(prev => [
            ...prev.slice(1, prev.length),
            newIDImg
        ]);

        tempArray = helperArrayNewSetOfFours(arrayClicked, props.product.images);
        setDisplaySmallerImages(tempArray);
    }
}

辅助函数helperArrayNewSetOfFours：

const helperArrayNewSetOfFours = (oldFour, fullArraySize) => {
    const arrayTemp = [];
    oldFour.forEach((val, ind) => {
        fullArraySize.forEach(img => {
            if (val === img.idImage) {
                arrayTemp.push({
                    id: img.id,
                    imgName: img.imgName,
                    imgData: img.imgData
                });
            }
        });
    });
    return arrayTemp;
}

原因分析 #

核心问题在于React的setState是异步更新：

1. 调用setArrayClicked后，arrayClicked的当前状态不会立刻更新，它仍然保持调用前的旧值；
2. 你在调用setArrayClicked后，立刻使用arrayClicked去生成tempArray并更新displaySmallerImages，此时传入辅助函数的是旧的数组值，导致displaySmallerImages没有更新为预期的新数据；
3. 第二次点击时，arrayClicked已经是上一次更新后的新值，这时候生成的tempArray才是正确的，界面才会更新。

而直接使用数组突变方法（shift/push）时，你修改的是arrayClicked的原引用，所以后续代码能立刻拿到修改后的数组，界面也会同步更新，但这种方式违反了React状态不可变的原则，可能导致组件无法正确重新渲染，或出现难以排查的状态不一致问题。

解决方案 #

有两种可行的修复方式，推荐第二种更符合React状态管理逻辑：

方式一：直接基于prev状态计算新数组，同步更新两个状态 #

在调用setArrayClicked时，先计算出更新后的新数组，再用这个新数组去生成tempArray，避免依赖未更新的arrayClicked：

const handleRightClick = () => {
    const exampleFakeIndex = 3;
    let newIDImg, newArrayClicked;

    if (props.product.images[exampleFakeIndex + 1] !== undefined) {
        newIDImg = props.product.images[exampleFakeIndex + 1].id;
        // 直接计算新数组
        newArrayClicked = [...arrayClicked.slice(1), newIDImg];
        setArrayClicked(newArrayClicked);
        // 用新数组生成tempArray
        const tempArray = helperArrayNewSetOfFours(newArrayClicked, props.product.images);
        setDisplaySmallerImages(tempArray);
    } else {
        newIDImg = props.product.images[0].id;
        newArrayClicked = [...arrayClicked.slice(1), newIDImg];
        setArrayClicked(newArrayClicked);
        const tempArray = helperArrayNewSetOfFours(newArrayClicked, props.product.images);
        setDisplaySmallerImages(tempArray);
    }
}

方式二：使用useEffect监听arrayClicked变化，自动更新displaySmallerImages #

这种方式让displaySmallerImages完全依赖arrayClicked的状态，符合React的单向数据流原则：

import { useState, useEffect } from "react";

// ... 状态定义部分不变 ...

// 监听arrayClicked变化，自动更新展示数组
useEffect(() => {
    const tempArray = helperArrayNewSetOfFours(arrayClicked, props.product.images);
    setDisplaySmallerImages(tempArray);
}, [arrayClicked, props.product.images]);

const handleRightClick = () => {
    const exampleFakeIndex = 3;
    let newIDImg;

    if (props.product.images[exampleFakeIndex + 1] !== undefined) {
        newIDImg = props.product.images[exampleFakeIndex + 1].id;
        setArrayClicked(prev => [...prev.slice(1), newIDImg]);
    } else {
        newIDImg = props.product.images[0].id;
        setArrayClicked(prev => [...prev.slice(1), newIDImg]);
    }
}

内容的提问来源于stack exchange，提问作者Mohamed