default.a.map 不是 React js 中的函数错误

Question

我目前正在学习反应。 我想将数据从 projectdata.js 导入 app.js 但 react 给了我这个错误

类型错误：_data_projectdata__WEBPACK_IMPORTED_MODULE_8___default.a.map 不是函数

这是写在 app.js 上的代码

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import Projects from './components/Projects'
import ProjectBox from './components/ProjectBox'
import projectData from './data/projectdata'



function App() {
let data = projectData.map(function(item) 
{
  return (<ProjectBox key={item.id} project={item} />);
}
);
  return (
    <div className="outerwrapper">
      <div className="wrapper2">
        <Projects >
          {data}
         </Projects>

    </div>

  );
}

export default App;

这是在projectdata.js上写的代码

const item = [
{ 
id : "1",
icon : "fas fa-bolt fa-8x",    
title : "Tesla Coil",
description : "something"
},
{
id : "2",
icon : "fas fa-microchip fa-8x", 
title : "Ardrino BT Car",
description : "Something",
},
{
id : "3",
icon : "fas fa-desktop fa-8x", 
title : "Unpacked",
description : "Something",
}
]

这是在 ProjectBox.js 上编写的代码

import React from 'react'

function ProjectBox(props){
    return(
<div>
    <i className={props.project.icon}></i>
<h1>{props.project.title}</h1>
<p>{props.project.description}</p>
</div>
    )
}
export default ProjectBox;

Answer 1

尝试替换const item = [ by export default [ 。

说明：

• 当您像import a from './foo'一样import a from './foo'中的foo.js应该是export default 。
• 当您像import {a} from './foo'一样import {a} from './foo'时， foo.js应该是常规的export 。

更多信息在这里