Javascript 解构对象条件反应

我目前正在createreact应用程序中使用

react钩子表单

。我已经将表单用法组件化，以确保可以在其他位置重复使用它。我试图解构一个物体，我很确定它会引起一个问题

问题：

        <Form onSubmit={onSubmit} {...form}>
            ...fields here
        </Form>

在我引入

createLoading

check之前，代码运行良好。

oppLoading

似乎单独运行良好。它们返回

布尔值

真值或假值，并且始终存在默认状态

但是，使用下面的代码，我得到以下错误

TypeError:无法对“.for”的属性“ref”进行分解，因为它未定义。

它没有给我太多的信息，也没有给我关注点。错误似乎来自react hook form，特别是第15行上的onDomRemove.ts

  12 | const observer = new MutationObserver((): void => {
  13 |   for (const field of Object.values(fieldsRef.current)) {
  14 |     if (field && field.options) {
> 15 |       for (const { ref } of field.options) {
     | ^  16 |         if (isDetached(ref)) {
  17 |           removeFieldEventListenerAndRef(field);
  18 |         }

我认为问题出在哪里：FormContainer.tsx

    <form
        {...(props.onSubmit && {
            onSubmit: handleSubmit(onSubmit),
        })}
        {...(props.onBlur && {
            onBlur: handleSubmit(onSubmit),
        })}
        className="opportunity--form"
    >

问题：

        <Form onSubmit={onSubmit} {...form}>
            ...fields here
        </Form>

我是在解构这个权利，还是解构的正确方式

FormContainer.tsx：

const FormContainer: React.FC<FormContainerProps> = (props) => {
    const { handleSubmit } = useFormContext();
    const { loading: oppLoading } = useSelector((state: ApplicationState) => state.save_opportunity_state);
    const { loading: createLoading } = useSelector((state: ApplicationState) => state.creation_state);

    const onSubmit = async (values: any) => {
        try {
            if (props.onBlur) {
                return await props.onBlur(values);
            }
            if (props.onSubmit) {
                return await props.onSubmit(values);
            }
        } catch (error) {
            console.error(error);
        }
    };

    if (oppLoading || createLoading) {
        return <CircularProgress size="80px" color="primary" />;
    }

    return (
        <form
            {...(props.onSubmit && {
                onSubmit: handleSubmit(onSubmit),
            })}
            {...(props.onBlur && {
                onBlur: handleSubmit(onSubmit),
            })}
            className="opportunity--form"
        >
            {props.children}
        </form>
    );
};

const FormContainer:React.FC=（道具）=>{
const{handleSubmit}=useFormContext（）；
const{loading:oppLoading}=useSelector（（状态：ApplicationState）=>state.save\u opportunity\u state）；
const{loading:createLoading}=useSelector（（状态：ApplicationState）=>state.creation\u状态）；
const onSubmit=async（值：any）=>{
试一试{
如果（道具onBlur）{
返回等待道具onBlur（值）；
}
如果（提交的道具）{
返回等待道具onSubmit（值）；
}
}捕获（错误）{
控制台错误（error）；
}
};
if（oppLoading | | createload）{
返回；
}
返回(
{props.children}
);
};

Form.tsx

export function Form({ onSubmit, onBlur, ...props }: any) {
    return (
        <FormProvider {...props}>
            <FormContainer onSubmit={onSubmit} onBlur={onBlur}>
                {props.children}
            </FormContainer>
            <CreateResults />
        </FormProvider>
    );
}

导出函数表单（{onSubmit，onBlur，…props}:any）{
返回(
{props.children}
);
}

用法：

        <Form onSubmit={onSubmit} {...form}>
            ...fields here
        </Form>

…这里的田地

我相信这是RHF的一个bug，我正在修补它。谢谢@Bill，我也在RHF讨论中发布了它。你能分享这个链接吗？是链接，该问题已在v6.5.3或更高版本中修复。我相信这是RHF的一个错误，我正在对此进行修补。谢谢@Bill，我也在RHF讨论中发布了它。您可以共享该链接吗？是链接，该问题已在v6.5.3或更高版本中修复。