Redux-form：不能使用三元運算符，因爲渲染時對象未定義

Question

我正在使用redux-form讓用戶點擊圖片（以激活隱藏的複選框）。一切工作正常，除了我想在點擊圖片時更改css。我使用三元運算符，它應該聽取複選框的值。我遇到的問題是，當組件最初呈現時，productValues.apps [product.name]返回undefined。我嘗試用false設置initialValue，但那也不起作用。我真的不知道如何解決這個問題。下面是複選框：

{ 
     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> 
     ); 
     }) 
    } 

這裏我用得到的複選框的數據選擇： 常量選擇= formValueSelector（「UserCreationForm」）;

UserCreationPageThree = connect(
    state => { 
    const productValues = selector(state, ...state.products.products.map(product => `apps[${product.name}]`)); 

    return { productValues } 
    } 
)(UserCreationPageThree) 

Answer 1

添加像條件 -

{（productValues & & productValues.apps & & productValues.apps [product.name]）？ 「應用程序覈對」：「應用程序容器」}

更新作爲用於請求 那裏Javascript World是not exists和undefined之間的差異。 undefined表示定義了某些內容，但未定義該值。

即 如果我定義原樣

file_1.js可變

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

NOW-

file_2.js

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;