使用模板文字访问输入名称属性 (React)答案

【问题标题】：Access input name attribute using template literals (React)使用模板文字访问输入名称属性 (React)
【发布时间】：2021-02-15 08:23:03
【问题描述】：

我在使用错误（React Hook Form 提供的对象）来显示输入字段的验证消息（当必需的输入字段为空时）时遇到一些问题。

{
  inputs.map((name) => (
    <div key={name}>
      <div style={{ marginTop: "3px" }}>
        <input
          name={`Chamfer Set.${name}`}
          ref={register({ required: true })}
        />
      </div>
      {errors[`Chamfer Set.${name}`] && (
        <span>Please enter a value for {name}.</span>
      )}
    </div>
  ));
}

基本上我必须将 errors 链接到 input name 属性，在本例中我使用的是模板文字。但它不起作用，我想这与文字有关，但我不是很喜欢它。你们有什么想法吗？

如果我使用 console.log(errors)，我有以下结构：

【问题讨论】：

name 变量的值是多少？

标签： javascript arrays reactjs object react-hook-form

【解决方案1】：

要访问错误属性，只需替换：

errors[`Chamfer Set.${name}`]

作者：

errors["Chamfer Set"] && errors["Chamfer Set"][`${name}`]

【讨论】：

不工作，我遇到 TypeError: Cannot read property 'l' of undefined :(
@Polalas 这是因为错误可能为空。我进行了编辑以考虑这种情况。

【解决方案2】：

正如@Micheal 所说，试试

{
  inputs.map((name) => (
    <div key={name}>
      <div style={{ marginTop: "3px" }}>
        <input
          name={`Chamfer Set.${name}`}
          ref={register({ required: true })}
        />
      </div>
      {errors[`Chamfer Set`][`${name}`] && (
        <span>Please enter a value for {name}.</span>
      )}
    </div>
  ));
}

【讨论】：