您可能混淆了默认导入和命名导入:仅使用默认导入

Question

我正在使用API开发React应用程序。我正在尝试显示海报图像，但我收到了以下错误：React.createElement:type无效——应为字符串(用于内置组件(或类/函数(用于复合组件(，但得到：未定义。您可能忘记了从中定义的文件导出组件，或者您可能混淆了默认导入和命名导入。

错误表明问题可能与我的进口或出口有关，但我不知道这会如何导致问题。

Index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../assets/stylesheets/application.scss';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import MovieList from './components/MovieList';
import '../assets/stylesheets/application.scss';
const App = () => {
const [movies, setMovies] = useState([{
"Title": "Star Wars: Episode IV - A New Hope",
"Year": "1977",
"imdbID": "tt0076759",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode V - The Empire Strikes Back",
"Year": "1980",
"imdbID": "tt0080684",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode VI - Return of the Jedi",
"Year": "1983",
"imdbID": "tt0086190",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
}]);
return (
<div>
<MovieList movies={movies} />
</div>
);
};
export default App;

MovieList.js

import React from 'react';
const MovieList = (props) => {
return (
<React.Fragment>
{props.movies.map((movie, index) => (
<div>
<img src={movie.Poster} alt='movie'></img>
</div>
))}
</React.Fragment>
);
};
export default MovieList;

我console.log了我的MovieList，我的函数出现在我的App.js中，所以它似乎导入正确，所以我的App.js可能有问题，但我没有看到任何错误。我只使用默认的导入和导出，是否需要将它们更改为命名的变体？

Answer 1

对我来说，代码看起来很好，只是纠正了MovieList组件中的两件事

• 在map返回中，在div中添加一个唯一的键
• 用/>替换></img>