React箭头函数带与不带大括号执行结果不同的问题排查

你的两段箭头函数执行结果不一致，核心原因是箭头函数的返回值规则差异：

• 定义bg的箭头函数使用了大括号包裹代码块，但没有写return语句。箭头函数如果用大括号，必须显式通过return返回值，否则函数默认返回undefined——哪怕你在大括号里写了colors[cl] || "#adb5bd"，这个表达式的结果不会自动成为函数返回值。
• 定义bg2的箭头函数是简洁写法（没有大括号），箭头后的表达式会自动作为函数返回值，所以能正确拿到对应颜色或默认值。

修复方法 #

方法1：给大括号内的代码加上return #

let bg = ((cl) => {
    return colors[cl] || "#adb5bd";
})("primary");

方法2：去掉大括号，使用箭头函数简洁写法 #

let bg = ((cl) => colors[cl] || "#adb5bd")("primary");

额外优化建议 #

如果你的colors对象可能存在值为假的情况（比如某个key对应空字符串），||会把这类假值也替换成默认值。更严谨的写法可以用空值合并运算符??，它只会在值为undefined或null时启用默认值：

colors[cl] ?? "#adb5bd"

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