本文探讨了在 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 情况，并提供合适的默认值。
