React.js开发Shopify购物车组件触发无限循环问题求助

根因分析 #

你代码中的无限循环是因为getCart函数直接写在了组件的顶层执行逻辑中：

• 组件每次渲染都会执行getCart，请求成功后调用setCart更新cart状态
• cart状态更新会触发组件重新渲染，进而再次执行getCart，形成无限循环

修复后完整代码 #

import React, { useState, useEffect } from "react"
import ReactDom from "react-dom"

const LineItem = (props) => {
    return (
    <div className="line-item" data-line="">
      <div className="line-item__header">
        <div className="line-item__title">
          <p>{console.log(props.cart)}</p>
        </div>
        <p className="line-item__price"></p>
      </div>
    </div>
  )
}

const CartDrawer = () => {
    const [cart, setCart] = useState("");

    const getCart = () => {
        fetch("/cart.js", {
            method: 'GET',
            headers: new Headers({'content-type': 'application/json', 'X-Requested-With':'xmlhttprequest'})
        }).then(res => {
            if (!res.ok) throw new Error('请求失败')
            return res.json();
        }).then(json => {
            setCart(json);
            // 要查看返回的购物车数据直接打印json即可，setCart是异步更新，此处打印cart拿不到最新值
            console.log('最新购物车数据',json);
        }).catch(err => {
            console.error('获取购物车失败:', err)
        });
    }

    // 仅在组件首次挂载时执行1次getCart
    useEffect(() => {
        getCart();
    }, [])

    return  <LineItem cart={cart} />;
}

const root = document.getElementById('cart__drawer_items');

ReactDom.render(<CartDrawer />, root);

核心修改说明 #

• 新增导入useEffect钩子，将getCart的调用放在依赖为空数组的useEffect回调中，保证只会在组件首次挂载完成后执行一次，不会触发循环渲染
• 补充了请求异常捕获逻辑，避免接口报错时没有提示
• 修正了状态更新后立即打印cart拿不到最新值的问题，React的状态更新是批量异步执行的，同步代码中无法拿到更新后的值

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