渲染前设置组件值：EventContainer查找currentRoute是否需用useEffect

结论先行 #

你当前的写法是完全合理的，完全不需要将查找逻辑放到useEffect中执行，此处使用useEffect属于错误的技术选型，反而会引发你担心的报错问题。

具体原因说明 #

• 你实现的路由匹配逻辑属于纯计算逻辑，不属于需要在渲染后执行的副作用，本身就应该放在渲染阶段直接计算。
• useEffect的执行时机是组件渲染完成之后，如果你把currentRoute放到useEffect中更新到state，第一次渲染时currentRoute会是初始的undefined，直接访问currentRoute.name必然会抛出报错，和你想要规避的问题完全相反。
• 你担心的查找耗时问题：Array.find是O(n)时间复杂度，只要你的routes数组没有达到数千条以上的规模，这个计算消耗完全可以忽略不计。就算真的存在大规模路由的场景，也应该用useMemo缓存计算结果，而不是用useEffect。

可选优化方案 #

如果你想进一步优化代码，可以做两个调整：

1. 用useMemo缓存路由匹配结果，只有当routes或者路径变化时才重新计算
2. 增加匹配失败的兜底判断，就算没有找到对应路由也不会抛出报错，提升代码健壮性

优化后代码参考：

import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';

export default function EventContainer({ routes, children }) {
  const location = useLocation();
  const currentRoute = useMemo(() => {
    return routes.find((route) => route.path === location.pathname);
  }, [routes, location.pathname]);

  return (
    <div>
      {currentRoute?.name ?? '未知路由'}
    </div>
  );
}

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