本文探讨了在 Next.JS 应用中，如何根据当前路由状态初始化侧边栏选中项的状态。针对使用 useState 和 useEffect 两种方式进行状态初始化可能存在的问题，提出了使用函数式 useState 初始化方式，以避免页面闪烁，确保状态在首次渲染时正确设置。
在构建 Next.js 应用时，经常需要根据当前路由状态来初始化组件的状态。例如，在侧边栏中高亮显示当前页面对应的菜单项。常见的方法是使用 useState 来管理选中项的状态，并根据路由变化来更新状态。然而，在状态初始化时，不同的方法可能会导致不同的渲染效果。
使用 useEffect 初始化状态
一种常见的方法是在 useState 中设置一个默认值，然后在 useEffect 中根据路由信息更新状态：
import { useState, useEffect } from 'react'; import { userouter } from 'next/router'; function Sidebar({ items }) { const router = useRouter(); const [selectedMenuItem, setSelectedMenuItem] = useState('defaultKey'); // 初始默认值 useEffect(() => { const item = items.find((item) => item.route === router.pathname); if (item) { setSelectedMenuItem(item.key); } }, [router.pathname, items]); // ... 渲染侧边栏 }
这种方法的缺点是，在首次渲染时，selectedMenuItem 会先显示默认值，然后在 useEffect 执行后才会更新为正确的值。这会导致页面出现闪烁，影响用户体验。特别是在刷新页面时，这种闪烁会更加明显。
直接在 useState 中初始化状态
另一种方法是直接在 useState 的初始值中计算出正确的状态：
import { useState } from 'react'; import { useRouter } from 'next/router'; function Sidebar({ items }) { const router = useRouter(); const [selectedMenuItem, setSelectedMenuItem] = useState( (items.find((item) => item.route === router.pathname))?.key || 'defaultKey' ); // ... 渲染侧边栏 }
这种方法看似简洁，但存在一个潜在的问题：如果 items.find((item) => item.route === router.pathname) 返回 undefined 并且没有提供默认值，则可能会导致错误。同时，如果 items 是一个复杂的数据结构，每次组件渲染都会执行一次 find 操作，可能会影响性能。
使用函数式 useState 初始化状态
最佳实践是使用函数作为 useState 的参数：
import { useState } from 'react'; import { useRouter } from 'next/router'; function Sidebar({ items }) { const router = useRouter(); const [selectedMenuItem, setSelectedMenuItem] = useState(() => { const item = items.find((item) => item.route === router.pathname); return item?.key || 'defaultKey'; }); // ... 渲染侧边栏 }
这种方法接受一个函数作为参数，该函数只会在组件首次渲染时执行一次。这避免了 useEffect 导致的闪烁问题，并且只在必要时计算初始值。同时，通过使用可选链操作符 ?.，可以安全地处理 find 操作返回 undefined 的情况，并提供默认值。
总结
在 Next.js 应用中，根据路由状态初始化组件状态时，应避免使用 useEffect 导致的闪烁问题。推荐使用函数式 useState 初始化方式，确保状态在首次渲染时正确设置，提升用户体验。同时，要注意处理可能出现的 undefined 情况，并提供合适的默认值。
