React中等待.map()执行完毕后判断结果并渲染内容的方案

核心问题在于每个ItemComponent的API请求和校验是异步操作，主组件无法直接同步知晓哪些子组件最终会渲染。我们需要通过状态跟踪实现需求：记录有效渲染的子组件数量，以及所有异步操作是否完成，最后根据这两个状态判断是否显示“Data not found”。

步骤1：改造主组件，添加状态跟踪 #

在FinalComponent中新增三个状态，用于跟踪子组件的处理状态：

• validItemCount：记录最终通过校验的子组件数量
• loadedCount：记录已完成异步操作（API请求+校验）的子组件数量
• allLoaded：标记所有子组件是否都完成了异步处理

import { useState, useEffect } from 'react';

export const FinalComponent = ({ items }) => {
  const [validItemCount, setValidItemCount] = useState(0);
  const [loadedCount, setLoadedCount] = useState(0);
  const [allLoaded, setAllLoaded] = useState(false);
  const totalItems = items.length;

  // 所有子组件加载完成时更新标记
  useEffect(() => {
    if (loadedCount === totalItems) {
      setAllLoaded(true);
    }
  }, [loadedCount, totalItems]);

  // 接收子组件的状态回调，更新计数
  const handleItemStatusChange = (isValid) => {
    setValidItemCount(prev => prev + (isValid ? 1 : 0));
    setLoadedCount(prev => prev + 1);
  };

  return (
    <div>
      {items.map((item, index) => (
        <ItemComponent 
          key={index} 
          data={item} 
          onStatusChange={handleItemStatusChange} 
        />
      ))}
      {/* 所有子组件处理完成且无有效项时显示提示 */}
      {allLoaded && validItemCount === 0 && (
        <p>Data not found</p>
      )}
    </div>
  ); 
};

步骤2：改造子组件，添加状态回调 #

在ItemComponent中，完成API请求和校验后，调用父组件传入的onStatusChange回调，告知父组件当前项是否有效。同时添加组件卸载的清理逻辑，避免内存泄漏。

import { useState, useEffect } from 'react';

export default function ItemComponent({ data, onStatusChange }) {
  const [returnedItem, setReturnedItem] = useState(null);
  const [isProcessed, setIsProcessed] = useState(false); // 标记当前项是否处理完成

  useEffect(() => {
    let isMounted = true;

    // 执行API请求
    const fetchData = async () => {
      try {
        // 替换为你的实际API请求逻辑
        const response = await fetch(`your-api-endpoint/${data.id}`);
        const result = await response.json();
        if (isMounted) {
          setReturnedItem(result);
        }
      } catch (error) {
        console.error('API请求失败:', error);
        if (isMounted) {
          setReturnedItem(null);
        }
      } finally {
        if (isMounted) {
          setIsProcessed(true);
        }
      }
    };

    fetchData();

    // 组件卸载时清理标记，防止内存泄漏
    return () => {
      isMounted = false;
    };
  }, [data]);

  // 完成处理后通知父组件当前项的有效性
  useEffect(() => {
    if (isProcessed) {
      // 替换为你的实际校验逻辑
      const check = returnedItem ? Object.keys(returnedItem).length : 0;
      const isValid = check > 0;
      onStatusChange(isValid);
    }
  }, [isProcessed, returnedItem, onStatusChange]);

  // 校验通过时返回渲染内容
  if (isProcessed) {
    const check = returnedItem ? Object.keys(returnedItem).length : 0;
    if (check > 0) {
      return (
        <div>
          <p>{returnedItem.name}</p>
        </div>
      );
    }
    // 校验不通过时返回空
    return null;
  }

  // 加载中可返回占位符（可选）
  return <div>Loading...</div>;
}

关键说明 #

1. 异步状态同步：通过loadedCount和allLoaded确保只有所有子组件的异步操作完成后，才判断是否显示提示，避免过早触发空状态。
2. 有效计数维护：子组件在完成所有处理后，通过回调告知父组件自身的有效性，父组件统一维护有效项的数量。
3. 内存泄漏防护：在API请求中使用isMounted标记，避免组件卸载后更新状态导致的React警告。

内容的提问来源于stack exchange，提问作者Emīls Bisenieks