结合 es6 文字模板处理 React-Hook-Form 错误对象的问题

Question

下面的代码显示了一个 table，其中我有一系列基于以下数组的行和列：

const weekDays = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];

const timeWindows = [
  "openOrder",
  "closeOrder",
  "openPickupOrder",
  "closePickupOrder",
];

基于上面的值，我还使用es6字面量模板动态生成了字段名。

当我尝试将 react-form-hook errors 对象与动态生成的名称（es6 文字模板）结合使用时，问题就开始了。错误不起作用。

     <table>
        <tbody>
          {weekDays.map((day) => (
            <tr key={day}>
              <td>{day}</td>
              <td>
                <ToggleButton label={day} statusRow={statusRow} />
              </td>
              {timeWindows.map((window) => (
                <td key={`${day}${window}`}>
                  <input
                    {...register(`${window}${day}`, {
                      required: true,
                    })}
                    type="time"
                  />
                  {`${errors}.${window}${day}` && ( <---- ISSUE IS HERE
                    <span>This field is required</span>
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

我正在尝试将 es6 文字模板与对象结合起来，并在 return 中包含以下内容：

errors.openOrderMonday

如果我 console.log(${errors}) 我得到 [object 对象]，如果我尝试 console.log(errors.${window}${day }`), 是的，它 return 是完整的字符串（上面），但它不是作为对象读取的。

非常感谢任何帮助。

谢谢乔

Answer 1

更新：

我在这里遇到了 2 个问题：

我无法使用带有对象的文字模板来显示错误
根据其他开发者建议的解决方案，errors 对象返回未定义

问题原因：

问题 1 是由代码结构引起的
问题 2 是由于在组件及其父组件中，我正在初始化 errors 和 register。实际上我做了两次。

修复：

问题 1：Pranay Nailwal 的初步建议解决了问题 errors[`${window}${day}`]
问题 2：我没有将 errors 和 register 初始化两次，而是从父组件 props 传递它们

我从我的子组件中删除了这个：

const {
    register,
    formState: { errors },
  } = useForm();

我用过这个：

const { register, errors } = props;

感谢大家的帮助。

结合 es6 文字模板处理 React-Hook-Form 错误对象的问题

Issue to handle React-Hook-Form errors object in combination with es6 literal templates

reactjs

ecmascript-6

react-hook-form

template-literals