Question

在使用npm链接模块进行本地开发时，redux-form遇到问题。我创建了一个打算在多个应用程序中使用的Input组件，因此将其放置在npm包中。在我的主应用程序中，我用reduxForm()包装了一个组件，然后将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

考虑到此错误仅在通过符号链接导入时发生，我假设这可能与webpack设置有关。以下是我的webpack配置中的一些摘录（我相信相关部分）：

{
    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组件进行一些样式设置并返回一个简单的输入。

希望所有这些对您有所帮助。我试图提供尽可能多的信息来帮助调试此问题，因为我真的无法弄清楚为什么会发生这种情况。通过符号链接的其他所有内容都可以完美运行，没有符号链接也可以完美地运行。我已经看了很长时间了，没有想法。

任何帮助将不胜感激。

谢谢！

Answer 1

步骤

连接到reduxform（要使用装饰器，您必须设置Babel或参考simple redux Form）
从redux-form导入的字段必须在表单内部使用。

就这样，请尝试以下步骤。

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

使用符号链接模块时，字段必须位于reduxForm（）内部

1 个答案: