使用模板文字访问输入名称属性 (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&nbsp;Set.${name}`]经过：errors["Chamfer&nbsp;Set"]&nbsp;&&&nbsp;errors["Chamfer&nbsp;Set"][`${name}`]

Answer 2

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