为何在fetch回调中修改React state未引发无限循环？

你的代码之所以没出现预期的无限循环，核心原因有两点：

1. fetch是异步操作，状态更新的触发时机有延迟 #

组件每次渲染都会同步执行fetch发起请求，但then里的回调是异步执行的——要等组件渲染完成、浏览器进入空闲阶段后才会触发：

• 第一次渲染：state初始值为null，console.log输出null，同时发起fetch请求。
• 等请求完成，回调触发setCartContent("test")，state从null变为"test"，触发第二次渲染。

2. React会跳过无变化的状态更新 #

第二次渲染时，组件会再次发起新的fetch请求，但当这次的回调执行setCartContent("test")时，当前state已经是"test"了。React内部会对比新旧状态，发现值完全相同，就会跳过状态更新和后续的渲染流程，不会触发第三次渲染。

换个场景验证：如果把setCartContent("test")改成每次设置不同的值（比如setCartContent(Date.now())），那每次状态更新都会触发新的渲染，新渲染又发起fetch，回调再更新不同的state，就会形成无限循环了。

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