有条件地解构对象React

如何解决有条件地解构对象React

我当前在create-react-app中使用react-hook-forms。我已经对Form用法进行了组件化，以确保可以在其他位置重用它。我正在尝试解构一个对象，我很确定它会引起问题。

问题：

在我引入createLoading检查之前，代码工作正常。 oppLoading似乎单独工作正常。它们返回boolean true 或 false ，并且始终存在默认状态。

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

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"
    >

问题：

我要解构这项权利吗？解构的正确方法是什么？

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>
    );
};

Form.tsx

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

用法：

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