React Conditional Rendering，避免将 0 评估为 false/undefined答案

【问题标题】：React Conditional Rendering, avoid 0 evaluated to false/undefinedReact Conditional Rendering，避免将 0 评估为 false/undefined
【发布时间】：2020-07-17 22:41:33
【问题描述】：

我已经检查了其他 Q/As。我的有点不同，我是 ReactJS 的新手。

以下用于设置 const 变量的代码将 0 评估为假/未定义从 myFunc 返回的值为 "" ：

function formatAmount(x){
  if(x === undefined || x === null) return "";
  return(x.toLocaleString("en-US",{style: "currency", currency: "USD"}));
}
//When user.bill.amount == 0 this line evaluates it to false!!
const amount = user?.bill?.amount || user?.statement?.amount;

function myFunc(){
  return(formatAmount(amount));
}

我尝试使用函数和 IF 条件对其进行扩展，但 myFunc 返回的值是“$NaN”：

const amount = () => {
  if(user?.bill?.amount || user?.bill?.amount === 0){
    return user?.bill?.amount;
  }
  if(user?.statement?.amount || user?.statement?.amount === 0){
    return user?.statement?.amount;
  }
}

预期：

当 user.bill.amount == 0 时，myFunc 应该返回“$0.00”

实际：

当 user.bill.amount == 0 时，myFunc 返回空字符串

【问题讨论】：

你的问题是......？
@Lenin Raj Rajasekaran，我的问题是当 user.bill.amount == 0 时如何让 myFunc 返回“$0”。我将编辑问题，感谢您的反馈！
toLocalString 中的错字 -> .toLocaleString

标签： javascript reactjs boolean conditional-statements

【解决方案1】：

我认为这里的问题是 0 是假的，所以在使用 || 时运算符 0 的计算结果为 false。

const amount = user?.bill?.amount || user?.statement?.amount;

如果您的环境支持可以在这里工作的 nullish 运算符。

const amount = user?.bill?.amount ?? user?.statement?.amount;

【讨论】：