UseEffect和SetInterval，创建无限循环并刷新会话

Question

我想继续提出请求，因为每当我将商品添加到购物车时，显示购物车中商品数量的漫画都必须更新。但这会不断刷新我的会话，因此当我将其投入生产时，它会变得滞后。 我想通过运行一次来解决这个问题，而不是 onclick，因为可以在单击时执行此操作的组件只是彼此不连接。

export default function Header({ props }) {
const pollingRef = useRef(0);

const [newItemState, setNewItemState] = useState(0);

    const [itemsState, setItemsState] = useState(props.cart);
    let finalquantity = itemsState.map((item) => item?.quantity || 0);
    // console.log(finalquantity);

    
    const updateCartAmount = async () => {
        try {
            let itemQuantities = itemsState.map((item) => item?.quantity || 0);
            let newItemState = itemQuantities.reduce((acc, sum) => acc + sum, 0);
            console.log(newItemState);

            const response = await axios.get('/cartjson');
            setItemsState(response.data);
            setNewItemState(newItemState);
        } catch (error) {
            console.error('Failed to update cart', error);
        }
    };
    
useEffect(() => {
        pollingRef.current = setInterval(() => {
            updateCartAmount();
            // console.log('polling');
    }, 2000)

    return () => {
        clearInterval(pollingRef.current)
    }
    }, []);

我正在使用 Inertia，我发现了一些关于 UseRemember 的内容，但我真的不知道这是否可以解决这个问题。我想更新数量，但不想更新会话令牌

Answer 1

首先，我看到您每 2 秒创建一次间隔，它用于不时从 Api 获取，我相信这就是滞后的原因。

另外，我认为如果您想更新购物车图标中的商品数量，您可以在组件的父级或顶部创建状态，并将计数传递给组件道具。因此，每当状态更新时，组件 props 也会更新。