Laravel+InertiaJS+ReactJS组件重复渲染问题求助

1. 确认React Strict Mode是否隐式启用 #

虽然你的app.jsx里没有直接包裹<React.StrictMode>，但可能存在以下隐式开启的情况：

• Inertia/Laravel默认配置：部分Laravel+Inertia的模板会在底层自动启用Strict Mode，比如通过Vite插件或Inertia的初始化配置。可以检查vite.config.js中React插件的Strict Mode配置，或者项目根目录下的inertia.js（若存在）。
• 父组件层级包裹：检查根App组件或页面组件，是否在某个层级包裹了<React.StrictMode>。部分页面模板可能会在页面组件外层添加这个标签。
• React DevTools验证：打开React DevTools查看组件树最顶层，若存在<StrictMode>节点，说明当前处于Strict Mode下，它会导致组件的render、useEffect（首次渲染时）等逻辑执行两次。

2. 检查组件内部逻辑问题 #

即使没有Strict Mode，以下问题也可能导致重复渲染：

• useState初始值错误：如果useState初始值是直接调用函数（如const [data, setData] = useState(fetchData())），每次组件渲染都会执行该函数，可能触发重复状态更新。应改成懒加载形式：const [data, setData] = useState(() => fetchData())。
• useEffect依赖项异常：检查useEffect的依赖数组，是否存在每次渲染都会变化的引用类型（如对象、数组），导致useEffect重复触发。比如useEffect(() => { ... }, [{ key: 'value' }])，每次渲染都会生成新对象，引发副作用重复执行。
• 状态更新逻辑重复：确认是否在多个地方调用了同一个状态更新函数，比如useEffect和事件回调中重复触发，或状态更新导致连锁渲染。

3. 排查Inertia相关问题 #

结合你使用Inertia的场景，这些点也需要检查：

• 页面加载重复：你的import.meta.glob使用了eager: true，可以在resolve函数里添加console.log(name)，查看是否同一个页面被请求了两次。
• Inertia props传递：通过React DevTools查看组件的props，是否存在重复传递的props，或props值频繁变化导致组件重新渲染。
• React DevTools警告：点击Inertia标题旁的警告标识，查看具体内容。常见警告包括Strict Mode提示、props类型不匹配、未使用的props等，这些信息能直接指向问题根源。

4. 其他排查点 #

• 第三方库问题：检查toast库的初始化逻辑，是否在组件中重复注册了toast实例，或调用了两次toast触发方法。
• DOM节点重复挂载：检查页面HTML结构，是否存在多个与el对应的DOM节点（比如id="app"的元素出现两次），导致createRoot渲染了两次App组件。

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