React开发中如何在对象数组内按条件添加元素且不插入空值

你现有写法的核心问题是：三元表达式命中条件时会往数组中插入null值，而非完全剔除该元素，既不符合「条件不满足就完全不插入」的需求，后续遍历null还会导致组件渲染报错。同时你的代码存在两处语法疏漏：

• 对象属性之间遗漏逗号分隔
• 数组变量名前后不一致（声明时为typesOfCards，渲染时误写为typeOfCards）

推荐使用条件展开空数组的写法实现需求，该写法最简洁，不会产生多余元素：
当条件不满足时，展开空数组等价于没有插入任何内容，完全符合你的要求。

完整修正代码 #

import { FC } from 'react';

const CardBuildingBlock: FC = () => {
    const type = 'typeA';

    const typesOfCards = [
      // 条件插入项：type不等于typeA时才插入Card A
      ...(type !== 'typeA' ? [{
        name: 'Card A',
        size: 'Medium',
        action: 'make'
      }] : []),
      // 固定保留的项
      {
        name: 'Card B',
        size: 'Small',
        action: 'break'
      },
      {
        name: 'Card C',
        size: 'Large',
        action: 'build'
      }
    ];

    return (
      <>
        {typesOfCards.map(({name, size, action}, index) => (
          <BuildCard 
            key={index} // React列表必须加唯一key，业务有唯一id优先用id
            name={name}
            size={size}
            action={action}
          />
        ))}
      </>
    );
};

可选方案：显式分支插入 #

如果需要按条件插入的元素较多，可以拆分声明步骤，可读性更高：

const CardBuildingBlock: FC = () => {
    const type = 'typeA';
    // 先声明固定保留的基础数组
    const typesOfCards = [
      {
        name: 'Card B',
        size: 'Small',
        action: 'break'
      },
      {
        name: 'Card C',
        size: 'Large',
        action: 'build'
      }
    ];

    // 条件判断是否插入目标对象
    if (type !== 'typeA') {
      // unshift插入到数组头部，push插入到尾部，按需选择
      typesOfCards.unshift({
        name: 'Card A',
        size: 'Medium',
        action: 'make'
      });
    }

    // 渲染逻辑和上文一致即可
}

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