使用模板文字访问输入名称属性 (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>  ));}基本上我必须将错误链接到输入名称属性，在本例中我使用模板文字。但它不起作用，我猜这与文字有关，但我不太喜欢它。你们有什么想法吗？如果我使用 console.log(errors)，我有以下结构：

Answer 1

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

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

经过：

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

Answer 2

尝试

{

  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>

  ));

}