尽管调试器另有说明，为什么这个变量不被认为是 0？答案

【问题标题】：Why is this variable not considered to be 0 despite debugger saying otherwise?尽管调试器另有说明，为什么这个变量不被认为是 0？
【发布时间】：2020-01-06 22:14:30
【问题描述】：

我正在编写一个 React 组件，它将评论总数作为道具。当评论数为0时，我想渲染一个元素说明

<div>No reviews yet.</div>

否则，我会渲染包含评论数据的元素。这是组件及其上下文：

const Stats = ({good, neutral, bad, totalReviews}) => {
    if ({totalReviews} === 0) 
        return <div>No reviews yet.</div>
    else {
        return (
            <div>
                <Stat text="Total: " amount={totalReviews} />
            </div>
        );
    }
}

const App = () => {
  const [good, setGood] = useState(0);
  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);

  let totalReviews = good + neutral + bad;

  return (
    <div>  
        <Stats totalReviews={totalReviews} />
    </div>
  )
}

我使用debugger 命令在 Chrome 的开发者控制台中检查每个变量的值。它显示totalReviews = 0。变量good, neutral, and bad也都是= 0。

我也用过console.log(totalReviews)。 0 由console.log 显示。为什么我的程序进入第二个条件好像 totalReviews 不是 0？

【问题讨论】：

从 totalReviews 中移除 {}
您正在将对象{totalReviews} 与数字0 进行比较。从{totalReviews} 中删除{}。

标签： javascript reactjs jsx equals-operator

【解决方案1】：

if (totalReviews === 0)

你只在 jsx 中用花括号包裹 js 语句，但你的 if 语句只是普通的 js。

【讨论】：

确实如此。条件未按预期运行的原因是 === 运算符的语义。来自此页面：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…“如果操作数严格相等且没有类型转换，则标识运算符 [===] 返回 true。”这句话的关键部分是没有类型转换。
谢谢。我最初认为我需要花括号，因为我想检查 props.totalReview （在组件声明中解构后将是 {totalReviews} ）。似乎我只需要 {} 来处理 jsx 语句，因为 totalReviews 现在是一个 JS 变量（props.totalReviews 是一个 JS 语句）。

【解决方案2】：

你的 if 条件有问题。它应该是if (totalReviews === 0) 或if (totalReviews == 0) 以避免强类型对话检查。如果条件不是标准方式，您已在其中添加{}

【讨论】：