使用Registering表单注册嵌套对象

Question

我已经和RHF合作了一段时间了，这实际上很有帮助，但是我一直在努力做一些事情，因为我可能没有足够的知识。

所以事情是，我有一个嵌套的对象，我带来了我的组件，抛出道具。

const Child = ({ globalObject, register }) => {
    const renderNested = Object.entries(globalObject.nestedObject);
    

    return (
                        <span>
                            {renderNested.map(([key, value], index) => {
                                return (
                                    <div key={index}>
                                        <Field
                                            type="text"
                                            label={key}
                                            name{`nestedObject.${key}`}
                                            defaultValue={value}
                                            ref={register}
                                        />
                                    </div>
                                );
                            })}
                        </span>

    );
};

很好，现在，这个nestedObject中的一个键有另一个对象作为值，当我映射并显示它们时，字段将显示:对象，例如，如果我使用useState，我知道如何解决这个问题。不确定这是否是一种好的做法，但我想说的是：

defaultValue={typeof value === 'someKey' ? value[key] : value}

但在这种情况下，使用寄存器(我想使用它，因为它拯救了我从其他噩梦)，我不知道如何解决这个问题。我应该过滤外面的数组，然后为一方呈现没有对象作为值的键，然后再呈现其余的键吗？在我看来，一定要有更好的东西。有人能给我建议吗？

澄清一下，nestedObject看起来是这样的：

nestedObject: {
key: value
key: {key:value}
}

Answer 1

您可以使用.点表示法访问字段，如寄存器方法的文档所示。因此，register("name.key")可以检索嵌套的对象和数组，但是请注意，在React v7中，检索已更改的嵌套数组项的语法从arrayName[0]到arrayName.0。

您的组件看起来类似于以下内容：

const Child = ({ globalObject, register }) => {
  const nestedKeys = Object.keys(globalObject.nestedObject);

  return (
    <>
      {nestedKeys.map((key) => (
        <Field key={key} {...register(`nestedObject.${key}`)} />
      ))}
    </>
  );
};

在本例中是不应使用索引作为关键支柱。，因为每个数组元素都有另一个稳定的标识符，该标识符来自唯一的嵌套对象键。