React组件useCallback依赖缺失警告：忽略还是优化结构？

你不需要忽略linter警告，当前代码不仅存在依赖缺失问题，还隐藏了闭包过时的bug——因为loadProductDetails的依赖为空，它内部引用的productDetail永远是初始的空数组，导致每次都会请求所有产品的详情，完全达不到“仅获取新产品”的需求。

下面是两种可行的优化方案，均能满足你的所有需求：

方案1：使用useRef同步最新状态（推荐） #

通过useRef保存productDetail的最新值，既可以在loadProductDetails中获取当前最新的状态，又无需将productDetail加入useCallback的依赖列表，从根源避免无限循环：

export default function MyComponent({personId}){
    const [products,setProducts] = useState([])
    const [productDetail, setProductDetail] = useState([])
    // 用ref同步productDetail的最新状态
    const productDetailRef = useRef(productDetail);

    useEffect(() => {
        // 每次productDetail更新时，同步到ref
        productDetailRef.current = productDetail;
    }, [productDetail]);

    const loadProductDetails = useCallback((someproducts) => {
        // 从ref中获取最新的productDetail
        const currentDetail = productDetailRef.current;
        const newProductIDs = getNewProductIDs(someproducts, currentDetail);
        
        CallProductDetailAPI(newProductIDs).then((data) => {
            // 使用函数式更新获取最新的prevState，避免依赖外部状态
            setProductDetail(prev => [...prev, data]);
        })
    },[]) // 无需添加productDetail到依赖

    const loadProductsForPerson = useCallback(() =>{
        CallProductAPIForPerson(personId).then( (productData) => {
            setProducts(productData)
            loadProductDetails(productData)
        })
    },[personId,loadProductDetails])

    useEffect( ()=>{
        loadProductsForPerson()
    },[loadProductsForPerson])

    const handleRefreshButtonClick = () => loadProductsForPerson()

    const getNewProductIDs = (products,productDetail) =>{
        // 实现逻辑：返回未在productDetail中的产品ID
    }

    return(
        <>
        <div>{products.map(p => <div key={p.id}>{p.name}</div>)}</div>
        <button onClick={handleRefreshButtonClick}>Refresh</button>
        </>
    )
}

方案2：使用useReducer管理状态 #

如果希望更规范地处理状态更新逻辑，可以用useReducer替代useState，将产品详情的加载和更新逻辑封装到reducer中，彻底避免闭包问题：

function productReducer(state, action) {
    switch(action.type) {
        case 'SET_PRODUCTS':
            return { ...state, products: action.payload };
        case 'ADD_PRODUCT_DETAILS':
            return { ...state, productDetail: [...state.productDetail, ...action.payload] };
        default:
            return state;
    }
}

export default function MyComponent({personId}){
    const [state, dispatch] = useReducer(productReducer, {
        products: [],
        productDetail: []
    });

    const loadProductDetails = useCallback((someproducts) => {
        const newProductIDs = getNewProductIDs(someproducts, state.productDetail);
        CallProductDetailAPI(newProductIDs).then((data) => {
            dispatch({ type: 'ADD_PRODUCT_DETAILS', payload: data });
        })
    },[state.productDetail])

    const loadProductsForPerson = useCallback(() =>{
        CallProductAPIForPerson(personId).then( (productData) => {
            dispatch({ type: 'SET_PRODUCTS', payload: productData });
            loadProductDetails(productData);
        })
    },[personId,loadProductDetails])

    useEffect( ()=>{
        loadProductsForPerson()
    },[loadProductsForPerson])

    const handleRefreshButtonClick = () => loadProductsForPerson()

    const getNewProductIDs = (products,productDetail) =>{
        // 实现逻辑：返回未在productDetail中的产品ID
    }

    return(
        <>
        <div>{state.products.map(p => <div key={p.id}>{p.name}</div>)}</div>
        <button onClick={handleRefreshButtonClick}>Refresh</button>
        </>
    )
}

两种方案均支持：

• 当personId变化时自动加载产品
• 点击按钮手动触发刷新
• 仅请求未获取过的产品详情

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