使用带有 connect() 的组件 - 无法读取未定义的属性“displayName”

Posted 2023-02-22

【中文标题】使用带有 connect() 的组件 - 无法读取未定义的属性“displayName”

【英文标题】：Use component with connect() - Cannot read property 'displayName' of undefined

【发布时间】：2017-01-03 05:11:30

【问题描述】：

我有一个与函数“connect”和一个展示组件有关的奇怪问题

import React from 'react';
import  withRouter  from 'react-router';
import  connect  from 'react-redux';

import * as optionGroupActions from 'actions/optionGroupActions';
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';

const mapDispatchToProps = (dispatch, ownProps) => 
  return 
    saveOptionGroup: (optionGroup) => 
      dispatch(optionGroupActions.fetchSaveOptionGroup(optionGroup));
    ,
    onClickCancel: () => 
      ownProps.router.push('/product/options');
    
  ;
;

const OptionGroupAddContainer = connect(
  null,
  mapDispatchToProps
)(OptionGroupForm);

export default OptionGroupAddContainer;

这可行，但如果我用这个更改导入

import  OptionGroupForm  from 'components’;

我收到了这个错误：

connect.js:57Uncaught TypeError: Cannot read property 'displayName' of undefined

components/index.js 看起来像

// OptionGroups
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';

export 
  OptionGroupForm
;

【问题讨论】：

我收到了这个错误，因为我不小心在我的类装饰器后面添加了括号：@withRouter() 而不是@withRouter。 See more here.

【参考方案1】：

如果你想import 如下所示

import  OptionGroupForm  from 'components’;

您必须在构建过程配置文件中使用resolve 来定义path 变量，

或者你可以像下面这样import它

import  OptionGroupForm  from './components’; 

编辑：您的 components/index.js 应该如下所示

import OptionGroupForm from './optionGroup/OptionGroupForm';

export 
  OptionGroupForm
;

【讨论】：

我以前用这个 import OptionGroupForm from 'components';在我的其他文件中......它工作正常

我已经编辑了我的答案检查它，当你在组件文件夹“components/optionGroup/OptionGroupForm”中时，你不必像它一样定义路径。也许这就是它显示错误的原因

不客气，如果我的回答对您有帮助，您能否将我的回答标记为正确答案，以便其他人从中获得帮助，谢谢

我试过了..我希望它有效，但我有同样的问题......当我更新了我的 index.js 时，我仍然有同样的问题。你知道出了什么问题吗？

在您导入的主文件上，如下所示？从“组件”导入 OptionGroupForm ；确保在将其导入主文件时放置了这些花括号

【参考方案2】：

根据您的构建过程，您可能需要像这样指定导入，以便将源视为相对路径而不是 npm 模块名称：

import  OptionGroupForm  from './components’;

【讨论】：

我曾经在我的其他文件中使用过这个import OptionGroupForm from 'components’;...并且它工作正常：-/