NextJS主从应用加载详情数据时Hook调用顺序错误排查

问题场景 #

刚入门React/NextJS，为团队API搭建基础前端，需求是：展示客户列表，选中客户后加载对应产品列表，使用客户端组件和状态管理选中项。目前客户列表能正常显示，但选中客户时触发报错：

React has detected a change in the order of Hooks called by ProductList. This will lead to bugs and errors if not fixed.

移除ProductList中的空值检查后，又会触发空对象属性访问错误。

当前代码 #

/app/page.tsx

import { Clients } from "@/components/clients";

export default async function Home() {
  return (
    <div>
      <Clients />
    </div>
  );
}

/components/clients.tsx

'use client';

import { useState } from 'react';
import { ClientList } from './clientList';
import { ProductList } from './productList';

export const Clients = () => {
    const [selectedClient, setSelectedClient] = useState(null);

    return (
        <div className="h-full flex justify-start items-start md:overflow-hidden">
            <div className="md:w-60">
                <ClientList onSelect={setSelectedClient}/>
            </div>
            <div className="flex-grow">
                <ProductList client={selectedClient} />
            </div>
        </div>
      );
}

/components/clientList.tsx

'use client';

import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { Client } from "@/app/lib/definitions";
import { getClients } from "../app/lib/data";

export const ClientList = ({ onSelect }) => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        getClients().then((data) => setItems(data));
    }, []);
    
    return (
        <div>
            <div>Clients</div>
            <ul>
                {items.map((item: Client) => (
                    <li key={item.Uid} onClick={() => onSelect(item)}>{item.Name}</li>
                ))}
            </ul>
        </div>
    );
};

/components/productList.tsx

'use client';

import { useEffect, useState } from 'react';
import { getProducts } from "@/app/lib/data";
import { Client } from '@/app/lib/definitions';

export const ProductList = ({ client } : { client:Client}) => {
    const [items, setItems] = useState([]);

    if (!client) {
        return <div>Products</div>
    }
    
    useEffect(() => {
        getProducts(client.Uid).then((data) => setItems(data));
    }, []);    

    return (
        <div>
            <div>Products</div>
            <ul>
                {items.map((item) =>
                    <li key={item.Uid}>{item.Name}</li>
                )}
            </ul>
        </div>
    );
};

解决方案 #

核心原因 #

React Hook规则明确要求：所有Hook必须在组件的顶层作用域调用，不能放在条件判断、循环、嵌套函数之后。当前ProductList中，if (!client) return在useState之后但在useEffect之前，当client从null变为有效值时，组件会跳过useEffect的调用，导致Hook执行顺序不一致，触发报错。

修复步骤 #

1. 调整空值检查位置：把空值判断移到所有Hook调用之后、组件渲染逻辑之前
2. 修正类型定义：允许client为null，匹配父组件的初始状态
3. 添加useEffect依赖项：将client.Uid加入依赖数组，确保选中不同客户时重新加载产品列表

修复后的ProductList代码 #

'use client';

import { useEffect, useState } from 'react';
import { getProducts } from "@/app/lib/data";
import { Client } from '@/app/lib/definitions';

// 修正类型，允许client为null
export const ProductList = ({ client } : { client: Client | null }) => {
    const [items, setItems] = useState([]);

    // 所有Hook调用完成后再做空值检查
    if (!client) {
        return <div>Products</div>
    }
    
    // 添加client.Uid到依赖数组，确保客户切换时重新请求
    useEffect(() => {
        // 可选：清空之前的产品列表，避免旧数据残留
        setItems([]);
        getProducts(client.Uid).then((data) => setItems(data));
    }, [client.Uid]);    

    return (
        <div>
            <div>Products</div>
            <ul>
                {items.map((item) =>
                    <li key={item.Uid}>{item.Name}</li>
                )}
            </ul>
        </div>
    );
};

额外优化建议 #

• 可以给ProductList添加加载状态，提升用户体验
• 在useEffect中添加取消请求的逻辑，避免竞态问题（比如快速切换客户时，旧请求的结果覆盖新请求）

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