Question

我有以下内容：

    {this.props.fields.map(field => (
      <div key={field.skill_id}>
        <Field
          component={RadioGroup}
          name={ 'skill_id_' + field.skill_id }
          title={field.name}
          activeValue={this.props.formState && this.props.formState.skill_id_${field.skill_id}}
          required={true}
          options={[
            { title: '1', value: '1' },
            { title: '2', value: '2' },
            { title: '3', value: '3' },
            { title: '4', value: '4' },
            { title: '5', value: '5' }
        ]} />

      </div>
    ))}

activeValue未正确评估。我需要动态评估这个变量：

this.props.formState.skill_id_${field.skill_id}}

我做错了什么？

我得到了

语法错误：意外的令牌，预期}（57:82）55
  name = {＆＃39; skill_id _＆＃39; + field.skill_id} 56
  title = {field.name}＆gt; 57个
  activeValue = {this.props.formState＆amp;＆amp; this.props.formState.skill_id _ $ {field.skill_id}}

Answer 1

您正在使用动态密钥从对象获取值，因此请使用[]表示法。

像这样写：

activeValue={this.props.formState && 
  this.props.formState[`skill_id_${field.skill_id}`]}

检查此代码段：

let obj = {
   a1: 1,
   a2: 2,
   a3: 3
};

[1,2,3].forEach(i => {

   console.log(`a${i} = `, obj[`a${i}`]);
   
})

查看MDN文档，了解有关 template literals 的详细信息。

检查this answer以获取有关括号表示法的更多详细信息。

Answer 2

使用 template literals 创建动态密钥，因为它是动态密钥，您应该使用括号表示法来访问对象属性

this.props.formState[`skill_id_${field.skill_id}`]

代码：

{this.props.fields.map(field => (
  <div key={field.skill_id}>
    <Field
      component={RadioGroup}
      name={ 'skill_id_' + field.skill_id }
      title={field.name}
      activeValue={this.props.formState && this.props.formState[`skill_id_${field.skill_id}`]}
      required={true}
      options={[
        { title: '1', value: '1' },
        { title: '2', value: '2' },
        { title: '3', value: '3' },
        { title: '4', value: '4' },
        { title: '5', value: '5' }
    ]} />

  </div>
))}

如何让React评估动态变量？

2 个答案: