未捕获的错误：应为字符串。您忘记从定义的文件中导出组件，或者您可能混淆了默认/命名导入

Question

您能帮我解决这个问题吗？我已经尝试解决导入功能，但我仍然收到该错误，并且我还尝试删除不起作用的“{}”。提前致谢。我正在关注 TylerMcginnis React-Redux 课程。 导航.js

import React from 'react'
import PropTypes  from 'prop-types'
import Link  from 'react-router-dom'
import { container, navContainer, link } from './styles.css'

Navigation.propTypes = ActionLinks.propTypes = NavLinks.propTypes = {
  isAuthed: PropTypes.bool.isRequired,
}

function NavLinks ({isAuthed}) {
  return (isAuthed === true
    ? <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
      </ul>
    : <noscript />)
}

function ActionLinks ({isAuthed}) {
  return (isAuthed === true
    ? <ul>
        <li>NEW DUCK</li>
        <li><Link to='/logout' className={link}>{'Logout'}</Link></li>
      </ul>
    : <ul>
        <li><Link to='/' className={link}>{'Home'}</Link></li>
        <li><Link to='/auth' className={link}>{'Authenticate'}</Link></li>
      </ul>)
}

export default function Navigation  ({isAuthed}) {
  return (
    <div className={container}>
      <nav className={navContainer}>
        <NavLinks isAuthed={isAuthed} />
        <ActionLinks isAuthed={isAuthed} />
      </nav>
    </div>
  )
}

---

MainContainer.js

import React from 'react'
import  Navigation from '../../components/Navigation/Navigation'
import {container, innerContainer}  from './styles.css'
import createReactClass from 'create-react-class'


const MainContainer = createReactClass({
  render () {
    return (
      <div className={container}>
        <Navigation isAuthed={true} />
        <div className={innerContainer}>
          {this.props.children}
        </div>
      </div>
    )
  },
})

export default MainContainer

错误： 未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 在不变量（invariant.js:42）

Answer 1

@Harsha 我有同样的错误。我花了一个小时左右的时间来确保我的代码是正确的，等等。我开始拆解我的代码，让它尽可能简单，然后更简单。

最后，问题是我将一个空文件复制到我的组件目录中，但在另一个目录中的同名文件中进行编码。所以我正在导入一个空文件。当然，它将是未定义的。 :(

另外，请记住输入分号。 ;)

Answer 2

在我的情况下，我正在导入如下组件，所以我遇到了同样的错误。

import { Calculator } from './src/calculator';

为了解决这个问题，我修改了如下的导入并且它起作用了。

import Calculator from './src/calculator';

Answer 3

同样的事情发生在我身上。 您可能没有保存文件。 也许您正在保存 App.js 文件而不是组件文件。 我正在保存当前文件（ctrl+S），以为我正在保存所有文件...... 我正在使用 VS Code，所以我去了文件/首选项/键盘快捷键，并将“全部保存”设置为 ctrl+shift+S。

Answer 4

确保您没有导入和使用空白组件