如何在ReactJS中实现两个Map操作的互斥执行？

要实现两个Map操作的互斥执行（一个失败则自动触发另一个），核心思路是先优先尝试第一种渲染逻辑，若不符合数据结构或执行出错，则切换到第二种逻辑，同时做好兜底处理。以下是两种可行的实现方式：

方式一：基于类型判断的条件渲染（推荐，更高效） #

先明确两种数据结构的特征，通过条件判断直接选择对应渲染逻辑，避免异常捕获的性能损耗：

import { useState } from 'react';

const YourComponent = () => {
  const [fname, setfname] = useState([]);

  // 封装渲染逻辑
  const renderFileLabels = () => {
    // 优先判断是否符合第一个Map的要求：fname是数组
    if (Array.isArray(fname)) {
      return fname.map((fileName, index) => (
        <label key={index}>{fileName}</label>
      ));
    }
    // 再判断是否符合第二个Map的要求：fname含document数组，且每个元素有documentName数组
    else if (fname?.document && Array.isArray(fname.document) && fname.document.every(item => Array.isArray(item.documentName))) {
      return fname.document.map((file, docIndex) => (
        <label key={docIndex}>
          {file.documentName.map((sff, sffIndex) => (
            <span key={sffIndex}>{sff}</span>
          ))}
        </label>
      ));
    }
    // 两种逻辑都不满足时的兜底渲染
    return <span>暂无有效文件数据</span>;
  };

  return (
    <>
      {fname ? 
        <>
          {/* 已有逻辑 */}
        </>
        :
        <>
          {renderFileLabels()}
        </>
      }
    </>
  );
};

方式二：基于try-catch的异常兜底（适合数据结构不确定场景） #

如果无法提前明确数据结构的所有可能情况，用try-catch捕获执行异常，自动切换渲染逻辑：

import { useState } from 'react';

const YourComponent = () => {
  const [fname, setfname] = useState([]);

  const renderFileLabels = () => {
    try {
      // 尝试第一个Map操作，先校验数组类型
      if (!Array.isArray(fname)) throw new Error('fname不是数组');
      return fname.map((fileName, index) => (
        <label key={index}>{fileName}</label>
      ));
    } catch (err) {
      // 第一个逻辑失败，尝试第二个
      try {
        // 校验第二个逻辑所需的结构
        if (!fname?.document || !Array.isArray(fname.document)) throw new Error('document结构无效');
        return fname.document.map((file, docIndex) => (
          <label key={docIndex}>
            {file.documentName.map((sff, sffIndex) => (
              <span key={sffIndex}>{sff}</span>
            ))}
          </label>
        ));
      } catch (secondErr) {
        // 两个逻辑都失败的兜底
        return <span>暂无有效文件数据</span>;
      }
    }
  };

  return (
    <>
      {fname ? 
        <>
          {/* 已有逻辑 */}
        </>
        :
        <>
          {renderFileLabels()}
        </>
      }
    </>
  );
};

关键注意点 #

• 给列表渲染添加key属性，避免React警告；
• 兜底渲染不可少，防止两种逻辑都失败时页面崩溃；
• 若数据结构稳定，优先用方式一，性能更优；若数据结构多变，用方式二更稳妥。

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