Question

我正在将应用程序中的代码重组为一堆子文件夹。我正在将一个top-nav组件移动到一个名为navigation的子文件夹中，该组件构成了一个“main-nav”容器的一部分。但是，当我将top-nav切换到新文件夹时，我开始获得以下错误

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。检查TopNavTemplate的呈现方法。

我一直在阅读很多线索，我无法弄清楚为什么改变这种情况会导致这种情况。我确保该组件指向文件重构中的相应导入（这些错误在当前错误之前被抛出，所以它至少认为它正在正确地拉动所有内容。）我也不认为它是一个import语句中的语法错误 - 我将top-nav连接到我的redux商店作为默认导出，我不会在{}之间导入它。

top-nav导出的代码可以在下面找到：

import React from 'react';
import {Link} from 'react-router-dom';
import ClickOutside from 'react-click-outside';
import {IconSprite} from '../general/icons.js';
import {Modal} from './modal.js';
import {HeaderSelect} from './select.js';
//Import statements that connect TopNav to the redux store
import * as actionCreators from '../../actions/actionCreator.js';
import { bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import logo from '../../logo.svg';


export class TopNavTemplate extends React.Component {
//Render function and a bunch of code goes here
}

function mapStateToProps(state) {
  return {
    selectedTarget: state.selectedTarget,
    availableTargets: state.availableTargets,
    modal: state.modal,
    currentUser: state.currentUser,
    isLoggedIn: state.isLoggedIn
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

const TopNav = connect(mapStateToProps, mapDispatchToProps)(TopNavTemplate);

export default TopNav;

然后我将TopNav导入到我的主导航布局中，如下所示：

import React from 'react';
import TopNav from '../components/navigation/top-nav.js';
import {SideNav} from '../components/side-nav.js';

export class MainNav extends React.Component{

    render(){
        return ([
            <TopNav />,
            <SideNav />
        ])
    }
  }

如果我将import语句更改为从旧版本的文件中拉出

从../ components / top-nav.js
导入TopNav

一切都像魅力一样。我甚至尝试删除该文件以防止任何类型的网络包混淆，但这似乎不是问题。出于某种原因，将此文件移动到另一个文件夹现在导致导出未定义而不是正确的反应组件？感到非常失落。

Answer 1

事实证明这是一个非常愚蠢的错误 - 我忘记保存我导入的其中一个文件，同时转移所有内容。出于某种原因，这并不会导致无法找到导入的错误，而是导致包装的连接组件以未定义的形式返回。

重新排列文件结构抛出“元素类型无效”错误

1 个答案: