reactjs - 使用 React Hook Form 注册嵌套对象

Question

我已经使用 RHF 工作了一段时间，它实际上帮助了很多，但我一直在尝试做一些我可能没有足够知识的事情。

所以我有一个嵌套对象，我把它带到了我的 componen throw props

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 中的一个键有另一个对象作为值，当我映射它们并显示时，该字段将显示:[object Object] 例如，如果我使用 useState，我知道我将如何解决该问题。 不确定这是否是一个好的做法，但我会选择类似的东西:

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

但在这种情况下使用寄存器(我想使用它，因为它使我免于其他噩梦)我不确定如何解决这个问题。 我是否应该在外部过滤数组，然后在一侧呈现没有对象作为值的键，然后呈现其余的键？ 在我看来，它必须比这更好。 谁能给点建议？

只是为了澄清，nestedObject 看起来像:

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

Answer 1

根据 register 的文档，您可以使用 . 点符号访问字段方法。所以 register("name.key") 可以检索嵌套对象和数组，但是请注意，在 React Hook Form v7 中 syntax to retrieve nested array items changed从 arrayName[0] 到 arrayName.0。

您的组件将类似于以下内容:

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

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

你 should not use index as key prop在这种情况下，因为每个数组元素都有另一个稳定标识符，它来自唯一的嵌套对象键。