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

这里是我用来获取复选框数据的选择器： const selector = formValueSelector（＆＃39; UserCreationForm＆＃39;）;

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

    return { productValues }
  }
)(UserCreationPageThree)

Answer 1

添加条件，如 -

{（productValues＆amp;＆amp; productValues.apps＆amp;＆amp; productValues.apps [product.name]）？＆＃34;应用程序核对＆＃34; ：＆＃34; app-container＆＃34;}

根据请求进行更新 not exists上的undefined和Javascript World之间存在差异。 undefined表示已定义某些内容，但未定义该值。

即。如果我将变量定义为 -

<强> file_1.js

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

现在 -

<强> 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;

Redux-form：不能使用三元运算符，因为渲染时对象未定义

1 个答案: