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

Question

我在使用错误（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>
  ));
}

基本上我必须 link 错误到 输入名称属性 ，在这种情况下我使用模板文字。但它不起作用，我想这与文字有关，但我不是很喜欢。你们有什么想法吗？

如果我使用console.log（错误），我有以下结构：

Answer 1

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

Answer 2

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

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

作者：

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

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

Access input name attribute using template literals (React)

javascript

arrays

object

reactjs

react-hook-form