React中useQuery的isLoading在空值合并运算符渲染时失效问题

这和useQuery本身没有关系，问题出在对空值合并运算符（??）的逻辑理解错误，以及React对布尔值的渲染规则上。

两种写法的本质差异 #

1. !isLoading ?? <BarChart>的实际行为 #

空值合并运算符??的核心逻辑是：只有当左操作数是null或undefined时，才返回右操作数，其他情况直接返回左操作数。

• 当isLoading为true时，!isLoading是false，false ?? <BarChart>返回false，React渲染时会忽略布尔值，所以不显示内容，这部分符合预期。
• 当isLoading变为false时，!isLoading是true，true ?? <BarChart>会直接返回true（因为true既不是null也不是undefined）。而React渲染true时同样会忽略这个布尔值，所以你看不到BarChart组件。

2. isLoading == false ? <BarChart> : ""的行为 #

三元运算符是标准的条件判断逻辑：

• isLoading为true时返回空字符串，React渲染空内容；
• isLoading为false时直接返回<BarChart>组件，自然能正常渲染。

替代的简洁写法 #

如果想不用三元运算符，你可以用逻辑与运算符&&，因为isLoading是布尔值，这种写法是安全的：

!isLoading && <BarChart />

当!isLoading为true时，会返回<BarChart>；为false时返回false，React会忽略这个布尔值，效果和三元运算符一致。

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