React中双列表关联请求的合理实现位置咨询

Hey there! Let's work through this React scenario to find a more robust approach than putting the validation logic in your Item component's componentDidMount.

1. Move Validation Logic to the Container Component (Recommended) #

The cleanest approach is to handle all data-fetching and validation in your Container component, keeping your Item component focused solely on rendering UI based on props. This follows the separation of concerns principle—container components manage data and state, while presentational components handle display.

Here's how you could refactor it with React Hooks (assuming you're using functional components):

import { useState, useEffect } from 'react';

const Container = ({ list1, list2 }) => {
  const [validatedList2, setValidatedList2] = useState([]);
  const [isValidating, setIsValidating] = useState(false);

  useEffect(() => {
    const validateList2Items = async () => {
      setIsValidating(true);
      // Run all validation requests concurrently with Promise.all
      const validatedItems = await Promise.all(
        list2.map(async (item) => {
          // Replace with your actual validation API call
          const validationResponse = await fetch(`/api/validate-item/${item.id}`);
          const isValid = await validationResponse.json();
          return { ...item, isValid };
        })
      );
      setValidatedList2(validatedItems);
      setIsValidating(false);
    };

    // Only run validation if list2 has items
    if (list2.length > 0) {
      validateList2Items();
    }
  }, [list2]);

  return (
    <div>
      {/* Render list1 immediately as required */}
      {list1.map(item => <Item key={item.id} {...item} />)}

      {/* Show loading state while validating list2 */}
      {isValidating && <p>Validating list2 items...</p>}

      {/* Render validated list2 items */}
      {validatedList2.map(item => (
        <Item key={item.id} {...item} isChecked={item.isValid} />
      ))}
    </div>
  );
};

Key Benefits: #

• Performance: Using Promise.all lets you run all validation requests in parallel instead of sequentially (one per Item mount).
• Better UX: You can show a single loading state for the entire list2 instead of individual loaders on each Item.
• Cleaner Components: Your Item component no longer needs to handle API calls—it just receives props and renders.

2. Extract Logic to a Custom Hook (For Reusability) #

If you need this validation logic in multiple components, wrap it in a custom Hook to keep your code DRY (Don't Repeat Yourself):

import { useState, useEffect } from 'react';

const useValidatedItems = (items) => {
  const [validatedItems, setValidatedItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const validate = async () => {
      setIsLoading(true);
      const results = await Promise.all(
        items.map(async (item) => {
          const res = await fetch(`/api/validate-item/${item.id}`);
          const isValid = await res.json();
          return { ...item, isValid };
        })
      );
      setValidatedItems(results);
      setIsLoading(false);
    };

    if (items.length) validate();
  }, [items]);

  return { validatedItems, isLoading };
};

// Use the hook in your Container
const Container = ({ list1, list2 }) => {
  const { validatedItems: validatedList2, isLoading } = useValidatedItems(list2);

  return (
    <div>
      {list1.map(item => <Item key={item.id} {...item} />)}
      {isLoading && <p>Validating list2 items...</p>}
      {validatedList2.map(item => <Item key={item.id} {...item} isChecked={item.isValid} />)}
    </div>
  );
};

Key Benefits: #

• Reusability: You can import this hook anywhere you need to validate items, avoiding code duplication.
• Cleaner Container: The Container component stays focused on rendering, with validation logic abstracted away.

3. Why Your Current Approach Isn't Ideal #

Putting validation in Item.componentDidMount has a few drawbacks:

• Unnecessary Network Requests: If list2 updates (e.g., re-fetched from the parent), every Item will remount and re-run the validation request—even if the item hasn't changed.
• Poor Performance: Each Item makes a separate API call sequentially, which is slower than running them in parallel.
• Mixed Responsibilities: The Item component should only handle UI rendering, not data fetching or validation. This makes it harder to test and reuse.
• Inconsistent UX: You'd have to add loading states to each individual Item, which can look clunky compared to a single loader for the entire list.

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