我正在尝试创建一个非常基本的react应用程序,我有一个文件名为'fakemovieservice.js'。 将该文件导入movies.jsx中,它们位于同一文件夹中。 getmovies()中有一个函数,它基本上获取存储在变量中的所有movie值,我试图将其打印在movies.jsx中创建的表中。
但显示导入错误。 FakeMovieService中的代码:-
const movies = [
{
_id: "5b21ca3eeb7f6fbccd471815",
title: "Terminator",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 6,
dailyRentalRate: 2.5,
publishDate: "2018-01-03T19:04:28.809Z"
},
{
_id: "5b21ca3eeb7f6fbccd471816",
title: "Die Hard",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 5,
dailyRentalRate: 2.5
},
{
_id: "5b21ca3eeb7f6fbccd471817",
title: "Get Out",
genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
numberInStock: 8,
dailyRentalRate: 3.5
},
{
_id: "5b21ca3eeb7f6fbccd471821",
title: "The Avengers",
genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
numberInStock: 7,
dailyRentalRate: 3.5
}
];
export function getMovies() {
return movies;
}
Code in movies.jsx
class Movies extends Component {
state = {
movies: getMovies()
};
render() {
return <table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
<body>
{
this.state.movies.map(movie =>(
<tr>
<td>{movie.title}</td>
<td>{ movie.genre.name }</td>
<td>{movie.numberInStorck }</td>
<td>{ movie.dailyRentalRate }</td>
</tr>
))}
</body>
</table>
}
}
您需要像相对导入一样导入文件:
https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/import
检查您试图导入的文件,并验证您正在将函数作为对象导出。
export { getMovies }
请显示您收到的实际错误,以及您试图导入的文件。 很多时候,文件并没有实际导出你想要的东西。 :)
我可以看到两个可能的问题,要么你忘了导出,要么你没有正确地导入。 如果您忘记了导出,那么您需要使用export
关键字,如下所示:
导出默认GetMovies;
或
如果您按照(1)中给出的方式导出它,那么只需从'
导入getMovies
如果按(2)中的方式导出,则从'
导入{getMovies}
记住在所有语言的导入中始终使用相对路径,并在StackOverflow中发布带有问题的实际错误。
编辑:你做错了,请参考[https://codesandbox.io/s/sharp-pascal-c7qxh](此处示例)。