React报错Objects are not valid as a React child：无括号三元运算异常原因？

1. 报错的直接原因 #

React 不支持直接将对象类型的值作为子元素渲染，你不加括号时最终zip变量存储的是{zip: "Henry street"}这个对象而非字符串，因此触发了该报错。

2. 三元运算符的右结合性是核心问题 #

JavaScript 中三元运算符的运算规则是右结合，也就是多个连续的三元运算会从右往左依次执行，而不是你默认以为的从左到右。
你没加括号的原始代码：

const zip = user ? user.address: undefined ? user.address.zip : undefined;

实际会被JS引擎解析为：

const zip = user ? user.address : (undefined ? user.address.zip : undefined);

计算逻辑：

• 先执行右侧括号内的三元运算：条件undefined为假，所以括号整体返回undefined
• 再执行外层的三元运算：user是存在的真值，所以最终返回user.address，也就是{zip: "Henry street"}对象

3. 加括号后逻辑正常的原因 #

加括号后你手动修改了运算优先级，强制先执行括号内的逻辑：

const zip = (user ? user.address: undefined) ? user.address.zip : undefined;

计算逻辑：

• 先执行括号内的三元运算：user为真，返回user.address（真值）
• 再执行外层的三元运算：条件为真，返回user.address.zip即字符串"Henry street"，属于合法的React可渲染值，因此报错消失。

补充优化建议 #

现在ES6+支持可选链运算符?.，可以更简洁地实现相同的判空逻辑，避免优先级问题：

const zip = user?.address?.zip;

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