错误:元素类型无效:需要一个字符串(用于内置组件)]，但got: undefined。下一站，反应

Question

我得到了这个错误，不知道我错过了什么！

我有三个文件，HeaderOption.js，HeaderOptions.js，Search.js

这是HeaderOptions.js的代码

import HeaderOption from "./HeaderOption";
import  DotsVerticalIcon from "@heroicons/react/outline";

import  MapIcon from "@heroicons/react/outline";
import  NewspaperIcon from "@heroicons/react/outline";
import  PlayIcon from "@heroicons/react/outline";
import  SearchIcon from "@heroicons/react/outline";
import  PhotographicIcon from "@heroicons/react/outline";

   function HeaderOptions() {
    return (
     <div>
        {/* Left */}
        <div className="flex space-x-6">
            <HeaderOption Icon={SearchIcon} tile="All" Selected /> 
            <HeaderOption Icon={PhotographicIcon} tile="Images" />
            <HeaderOption Icon={PlayIcon} tile="Videos" />
            <HeaderOption Icon={NewspaperIcon}  tile="News" />
            <HeaderOption Icon={MapIcon}  tile="Maps" />
            <HeaderOption Icon={DotsVerticalIcon}   tile="More" />

        </div>


        {/* Right */}
        <div className="flex space-x-4">
            <p className="link">Settings</p>
            <p className="Link">Tools</p>

        </div>
    </div>
    );
}

export default HeaderOptions;

HeaderOption.js

function HeaderOption({Icon, title, selected}) 
{
    return (
        <div className={`flex`}>
            <Icon className="h-4" />
            <p className="hidden sm:inline-flex">{title}</p>

        </div>
    );
         
} 
  

export default HeaderOption;

我得到上述错误，我检查了两次进口，帮助将不胜感激。

Answer 1

我认为您可能不完全清楚ES6导入是如何工作的。

import foo from 'bar'

将模块“bar”的默认导出分配给foo。如果没有默认导出，foo将是未定义的。

import  MapIcon from "@heroicons/react/outline";
import  NewspaperIcon from "@heroicons/react/outline";
import  PlayIcon from "@heroicons/react/outline";
import  SearchIcon from "@heroicons/react/outline";

所有这些变量都将具有相同的值，默认导出，在您的示例中是未定义的。

使用命名导出(带大括号)，一切都应该正常工作。

关于将来如何解决这个问题的建议。我不知道您做了什么来‘检查导入’，但是仅仅是记录或调试来查看这些导入变量的值，就可以准确地告诉您发生了什么。