Поле должно быть внутри reduxForm () при использовании модуля с символическими ссылками - PullRequest
Новая
       1

Поле должно быть внутри reduxForm () при использовании модуля с символическими ссылками

0 голосов
/ 10 мая 2019

У меня проблемы с redux-form при локальной разработке со связанным модулем npm.Я создал компонент Input, который я намерен использовать в нескольких приложениях, и поместил его в пакет npm.В моем основном приложении я обертываю компонент с reduxForm(), а затем импортирую компонент Input в этот обернутый компонент.Компонент Input инициализирует Field из redux-form.

. Если я импортирую компонент Input из любого места в моем проекте, он будет работать отлично.Точно так же, если я устанавливаю пакет в мои node_modules и импортирую его оттуда, он также работает отлично.Однако, как только я импортирую его через символическую ссылку (используя npm link), он жалуется на следующую ошибку: Uncaught Error: Field must be inside a component decorated with reduxForm()

Это странно, мне кажется из трассировки стека, что это на самом делеукрашен reduxForm().Я также использую Redux Dev Tools и вижу, что форма была инициализирована в том состоянии, в каком я ее ожидаю ... Итак, форма там точно.

Трассировка стека: 

react-dom.development.js:17882 
The above error occurred in the <Field> component:
    in Field (created by Context.Consumer)
    in Hoc (created by Field)
    in Field (created by FieldComponent)
    in div (created by Index)
    in Index (created by FieldComponent)
    in FieldComponent (created by Connect(FieldComponent))
    in Connect(FieldComponent)
    in div
    in Col
    in div
    in Row
    in form
    in div (created by Index)
    in Index
    in EditProfileView
    in EditProfile
    in Form(EditProfile)
    in Connect(Form(EditProfile))
    in ReduxForm
    in Hoc
    in ReduxForm
    in Connect(ReduxForm)
    in div
    in Col
    in div
    in Row
    in ContactView
    in Contact
    in Connect(Contact)
    in Route
    in Switch (created by FlatSwitch)
    in FlatSwitch (created by App)
    in Switch (created by FlatSwitch)
    in FlatSwitch (created by App)
    in div (created by Col)
    in Col (created by AppView)
    in div (created by Row)
    in Row (created by AppView)
    in div (created by Container)
    in Container (created by AppView)
    in div (created by AppView)
    in AppView (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App)) (created by App)
    in Auth (created by Connect(Auth))
    in Connect(Auth) (created by Route)
    in Route (created by withRouter(Connect(Auth)))
    in withRouter(Connect(Auth)) (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App
    in Provider

Учитывая, что эта ошибка возникает только при импорте через символическую ссылку, я предполагаю, что это может быть связано с настройкой веб-пакета.Вот некоторые выдержки из моего конфига веб-пакета (я полагаю, соответствующие части): 

{
    resolve: {
        symlinks: true,
        extensions: ['.jsx', '.js'],
        alias: {
            core: '/Users/MyUser/Projects/@AAG/core',
        },
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                include: [
                    '/Users/MyUser/Projects/Hub/src',
                    '/Users/MyUser/Projects/@AAG/core',
                ],
                exclude: [
                    /mapbox-gl/,
                ],
                loader: 'babel-loader',
                ...
            }
        }
    }
}

Итак, вы можете видеть, что он настроен для переноса из правильного каталога с символическими ссылками.И на самом деле он работает нормально, так как babel управляет всеми JSX и всеми другими функциями моего веб-сайта (я импортирую немного из псевдонима core).redux-form - моя единственная ошибка на данный момент.

Итак, созданная мной форма (EditProfileView из трассировки стека) импортирует компонент Input следующим образом: 

import { Input } from 'core/components/Form';

Коддля этого выполните следующие действия: 

const Input = field(InputField);
export { Input };

import { connect } from 'react-redux';
import { Field } from 'redux-form';
export function field(Component) {
    const FieldComponent = (props) => {
        ...
        return (
            <div className={`${className} ${block ? s.block : s.inline}`}>
                <Field component={Component} {...props} />
            </div>
        );
    };
    function mapStateToProps(state) {
        return { theme: state.theme };
    }
    return connect(mapStateToProps)(FieldComponent);
}

А затем компонент InputField выполняет стилизацию и т. д. и возвращает простой ввод.

Надеюсь, все это поможет.Я пытался дать как можно больше информации, чтобы помочь отладить это, потому что я действительно не могу понять, почему это происходит.Все остальное через символическую ссылку работает отлично, и без символической ссылки это также работает отлично.Я давно смотрю на это и у меня нет идей.

Любая помощь будет принята с благодарностью.

Спасибо!

1 Ответ

0 голосов
/ 11 мая 2019

Шаги

  1. подключиться к избыточной форме (чтобы использовать декоратор, вы должны настроить свой babel или обратиться простая избыточная форма )
  2. Поле, которое импортируется из избыточной формы, должно использоваться внутри формы.

Вот и все, попробуйте следующие шаги. 

import { Input } from 'core/components/Form';
    The code for this as as follows:

    const Input = field(InputField);
    export { Input };
    import { connect } from 'react-redux';
    import { Field, reduxForm } from 'redux-form';

    @reduxForm ({
     form: 'nameOfForm'
    })
    export function field(Component) {
        const FieldComponent = (props) => {
            ...
            return (
                <div className={`${className} ${block ? s.block : s.inline}`}>
                   <form>
                    <Field component={Component} {...props} />
                   </form>
                </div>
            );
        };
        function mapStateToProps(state) {
            return { theme: state.theme };
        }
        return connect(mapStateToProps)(FieldComponent);
    }
...