React中useEffect更新useState后组件未重新渲染问题求助

核心问题 #

你遇到的情况是：首次挂载时，useEffect请求数据并更新cards状态后，动态生成的路由并未立即生效，必须切换路由再返回才能正常匹配。本质原因是初始渲染时cards为空数组，<Routes>未生成对应路由规则；当cards更新后，<Routes>没有自动触发当前路径的重新匹配，同时如果LandingPage依赖cards渲染列表，初始空数组也会导致首次无内容。

解决方案 #

1. 改用useRoutes替代<Routes>+<Route>

useRoutes是React Router提供的基于Hook的路由配置方式，会自动响应状态变化，当cards更新时，路由规则会实时更新并重新匹配当前路径。

修改代码如下：

const App: React.FC = () => {
    const [cards, setCards] = useState<Card[]>([]);

    useEffect(() => {
        axios.get("http://localhost:3001/cards")
            .then(response => setCards(response.data))
            .catch(error => alert(`Error fetching cards. ${error}`))
    }, []);

    // 用useRoutes定义路由规则
    const routes = useRoutes([
        { path: '/', element: <LandingPage cards={cards} /> },
        ...cards.map(card => ({
            path: `/${card.endpoint}`,
            element: <Card card={card} />,
            key: card.id || card.endpoint // 用唯一标识做key，不要用索引
        }))
    ]);

    return routes;
}

2. 添加加载状态优化体验

因为请求开销较大，首次加载时可以显示加载提示，避免用户看到空白页面：

const App: React.FC = () => {
    const [cards, setCards] = useState<Card[]>([]);
    const [isLoading, setIsLoading] = useState(true); // 新增加载状态

    useEffect(() => {
        axios.get("http://localhost:3001/cards")
            .then(response => {
                setCards(response.data);
                setIsLoading(false);
            })
            .catch(error => {
                alert(`Error fetching cards. ${error}`);
                setIsLoading(false);
            })
    }, []);

    if (isLoading) {
        return <div>加载中...</div>; // 加载时显示
    }

    const routes = useRoutes([
        { path: '/', element: <LandingPage cards={cards} /> },
        ...cards.map(card => ({
            path: `/${card.endpoint}`,
            element: <Card card={card} />,
            key: card.endpoint
        }))
    ]);

    return routes;
}

3. 避免用索引作为路由的key

你的代码中用idx作为<Route>的key，当cards数组顺序变化时会导致React错误复用组件，建议改用card.endpoint或卡片的唯一ID作为key，保证路由组件的正确渲染。

为什么切换路由再返回会正常？ #

当你切换到其他路由再返回时，React Router会重新执行路由匹配逻辑，此时cards已经更新，动态路由规则已经存在，所以能正确匹配并渲染对应的<Card>组件。

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