组件多次复用导致API错误重复显示的解决方案咨询

Great question! The root issue here is that each instance of your Product component is making its own API call and handling errors independently—so 8 components mean 8 duplicate error alerts. Let's break down the best solutions based on your specific scenario:

Scenario 1: All Product components use the same data #

If you're rendering 8 Product components with data from the same API endpoint, the most efficient fix is to move the API request logic up to the parent Home Page component. This way, you only make one API call, handle errors once, and pass the data down to each Product via props.

Example Code: #

Home Page Component

import { useState, useEffect } from 'react';
import Product from './Product';

function HomePage() {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('/api/products');
        if (!response.ok) throw new Error('Failed to load product data');
        const productData = await response.json();
        setProducts(productData);
      } catch (err) {
        setError(err.message);
        // Show error once here (use your preferred notification method: alert, toast, etc.)
        alert(err.message);
      }
    };

    fetchProducts();
  }, []);

  // Show global error state if needed
  if (error) return <div className="error-banner">Error: {error}</div>;

  return (
    <div className="home-page">
      {products.map(product => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
}

Product Component

// No more API calls or error handling here—just render the passed data
function Product({ product }) {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      {/* Add other product details */}
    </div>
  );
}

This approach not only fixes duplicate errors but also reduces unnecessary network requests—win-win!

Scenario 2: Each Product needs a unique API call #

If each Product component is fetching unique data (e.g., individual product details via a product ID), you'll need to prevent duplicate error notifications while keeping per-component requests. Here are two solid approaches:

Approach 1: Global Error Tracking with Context #

Create a global error handling system using React Context to track which errors have already been shown, so duplicates are skipped.

Step 1: Create an Error Context

import { createContext, useContext, useState, useCallback } from 'react';

const ErrorContext = createContext();

export function ErrorProvider({ children }) {
  const [shownErrors, setShownErrors] = useState(new Set());

  const showError = useCallback((errorMessage) => {
    if (!shownErrors.has(errorMessage)) {
      // Replace with your notification component (e.g., a toast library)
      alert(errorMessage);
      setShownErrors(prev => new Set([...prev, errorMessage]));
    }
  }, [shownErrors]);

  return (
    <ErrorContext.Provider value={{ showError }}>
      {children}
    </ErrorContext.Provider>
  );
}

// Custom hook to access the error context
export function useError() {
  return useContext(ErrorContext);
}

Step 2: Wrap Your App with the Provider

import { ErrorProvider } from './ErrorContext';
import HomePage from './HomePage';

function App() {
  return (
    <ErrorProvider>
      <HomePage />
    </ErrorProvider>
  );
}

Step 3: Use the Context in Your Product Component

import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function Product({ productId }) {
  const [product, setProduct] = useState(null);
  const [error, setError] = useState(null);
  const { showError } = useError();

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) throw new Error('Failed to load product details');
        const productData = await response.json();
        setProduct(productData);
      } catch (err) {
        setError(err.message);
        // Let the global handler handle deduplication
        showError(err.message);
      }
    };

    fetchProduct();
  }, [productId, showError]);

  if (error) return <div className="product-error">Failed to load product</div>;
  if (!product) return <div className="product-loading">Loading...</div>;

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

Approach 2: Component-Level Error Debouncing #

If you want a simpler, component-local solution (no global context), use a debounce function to ensure error notifications only fire once within a set time window.

import { useState, useEffect, useCallback } from 'react';

// Custom debounce helper
function debounce(func, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

function Product({ productId }) {
  const [product, setProduct] = useState(null);
  const [error, setError] = useState(null);

  // Debounce error notifications to fire only once every 3 seconds
  const debouncedShowError = useCallback(debounce((msg) => alert(msg), 3000), []);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) throw new Error('Failed to load product details');
        const productData = await response.json();
        setProduct(productData);
      } catch (err) {
        setError(err.message);
        debouncedShowError(err.message);
      }
    };

    fetchProduct();
  }, [productId, debouncedShowError]);

  // Render loading/error states as before
  if (error) return <div className="product-error">Failed to load product</div>;
  if (!product) return <div className="product-loading">Loading...</div>;

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </div>
  );
}

Final Recommendation #

Always prioritize moving API requests to the parent component when possible—it's the most efficient solution. If you need per-component requests, the Context-based global error handler is the most scalable option for larger apps.

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