结果在 React.js 陷入无限循环

Question

谁能帮我解决我的问题？ 我是 React.js 的初学者，我刚刚制作了用于显示购物车结果的组件！ 但不知为何，陷入了无限循环。

问题截图： http : //prntscr.com/1w5hbey

您可以使用此站点 URL 查看控制台数据。 谢谢

https://side-cart-react.myshopify.com/products/test2

import React, { useState } 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 => {
            return res.json();
        }).then(json => {
                setCart(json);
            console.log('state',cart);
        });
    }

    getCart();

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

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

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

Answer 1

当您调用setCart(json) ，它会导致您的组件重新渲染。 在此后续渲染中，您的函数getCart()再次被调用，因此您将自己getCart()在无限循环中。 相反，您应该像这样在useEffect调用getCart() ：

const CartDrawer = () => {
  useEffect(() => {
    getCart();
  }, []);

  return  ...;
}

这样，它只会被调用一次。 如果您希望购物车在某些状态或道具更改时更新，您应该将这些变量添加到useEffect依赖项数组中。