React应用中JS按条件向对象数组添加元素结果错误如何解决？

这一问题和React特性无关，是JavaScript原生&&运算符的短路求值规则导致的：
条件 && 表达式的运算逻辑为：条件为真时返回后面的表达式结果，条件为假时直接返回条件本身的假值。所以当flag为false时，数组第二项会直接插入false，而非按预期不生成该项。

下面是三种常用的正确实现方式：

• 方案1：数组过滤法
  构造完数组后调用filter(Boolean)过滤所有假值（false、undefined、null等都会被清除），改造成本最低。

var flag = .. // 返回布尔值true或false

infographicObjectsArray.push({
    "buttons": [
            {"id":"viewAgreementsButton","variant":"outline-" + variantType,"text":"View Agreement","url":"/viewAgreementForm?id=" + eligibleSingleAgreement.id},
            flag && {"id":"newAgreementButton","variant":variantType,"text":"New Agreement","url":"/newAgreementType"}
        ].filter(Boolean)
});

• 方案2：扩展运算符法
  通过三元表达式判断，条件为假时展开空数组，不会产生多余项，性能最优。

var flag = .. // 返回布尔值true或false

infographicObjectsArray.push({
    "buttons": [
            {"id":"viewAgreementsButton","variant":"outline-" + variantType,"text":"View Agreement","url":"/viewAgreementForm?id=" + eligibleSingleAgreement.id},
            ...(flag ? [{"id":"newAgreementButton","variant":variantType,"text":"New Agreement","url":"/newAgreementType"}] : [])
        ]                          
});

• 方案3：提前声明后条件插入
  逻辑最直观，适合数组项多、判断条件复杂的场景。

// 先初始化基础项
const buttons = [
    {"id":"viewAgreementsButton","variant":"outline-" + variantType,"text":"View Agreement","url":"/viewAgreementForm?id=" + eligibleSingleAgreement.id}
]
// 条件满足时再追加项
if(flag) {
    buttons.push({"id":"newAgreementButton","variant":variantType,"text":"New Agreement","url":"/newAgreementType"})
}
infographicObjectsArray.push({ buttons })

内容的提问来源于stack exchange，提问作者gene b.