Redux表单：Can'；不要使用三元运算符，因为渲染时对象未定义

我使用redux表单让用户点击图片（激活隐藏的复选框）。一切正常，除了我想在点击图片时更改css。我使用了一个三元运算符，它应该监听复选框的值。我遇到的问题是，当组件最初呈现时，productValues.apps[product.name]返回未定义。我尝试将initialValue设置为false，但也不起作用。我真的不知道如何解决这个问题。以下是复选框：

   {
      products.products.map(product => {
        return(
          <div className={ `col-xs-2 ${productValues.apps[product.name] ? "app-checked" : "app-container"}` }
               key={ product.id }>
            <label htmlFor={ product.name }>
              <img className="app-circle"
                   src={ product.image } alt={ product.title }
                   data-toggle="tooltip" data-placement="top" title={ product.title }/>

              <Field name={ `apps[${product.name}]` } className="hidden"
                    component="input" type="checkbox" id={ product.name }/>
            </label>
          </div>
        );
      })
    }

---

加入以下条件—

{（productValues&&productValues.apps&&productValues.apps[product.name]）？“已选中应用程序”：“应用程序容器”}

根据请求更新 在

Javascript世界

上，

不存在

和

未定义

之间存在差异<代码>未定义表示已定义某些内容，但未定义值

i、 e。 如果我将变量定义为-

文件_1.js

现在-

文件_2.js

在您的情况下-

productValues.apps[product.name] does not exists;

---

这完全奏效了。谢谢但我真的不明白为什么它不在这里删除相同的错误。我的意思是，productValues.apps[product.name]在呈现时仍然应该是未定义的。为什么他在这种情况下不费心呢？请你解释一下好吗？我编辑了一下我的答案。我希望你能理解。谢谢你的解释。非常感谢你的努力。

var x;
console.log(x); // its will display undefined on console.

console.log(x); // it will throw error on 'strict mode' but on non `strict mode` javascript engine will first define `x` for you then console.log undefined.

productValues.apps[product.name] does not exists;