为什么在获取回调中设置状态（不会）导致无限循环？

Question

我有以下代码片段，我预计它会由于组件体内的 fetch 回调内的状态更新而不使用“useEffect”而导致无限循环。但是，它的行为并不如预期。这是代码：

function App() {
  const [cartContent, setCartContent] = useState(null);

  fetch("https://fakestoreapi.com/carts/6")
    .then((resp) => resp.json())
    .then((data) => {
      setCartContent("test");
    });

  console.log(cartContent);

  return <div className="cartContent">{cartContent}</div>;
}

export default App;

我的理解是 console.log(cartContent) 应该记录 cartContent 的初始值，然后当在 fetch 回调中调用 setCartContent("test") 时，它应该记录“test”，并且应该重复此过程无限地，创建无限循环。

有人可以帮我理解为什么这段代码没有按预期导致无限循环吗？任何见解或解释将不胜感激。谢谢！

Answer 1

因为这应该位于 useEffect 或任何其他效果包（如反应查询）内