Блог

Я работаю над приложением React с использованием API. Я пытаюсь отобразить изображения плакатов, однако я получаю эту ошибку: React.createElement: недопустимый тип — ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined . Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

В ошибке указано, что проблема, вероятно, связана с моим импортом или экспортом, но я не понимаю, как это может вызвать проблему.

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;
 

Я консоль.зарегистрировал мой список фильмов, и моя функция появляется в моем App.js так что, похоже, он импортирует правильно, так что что-то может быть не так с моим App.js но я не вижу никаких ошибок. Я использую только импорт и экспорт по умолчанию, нужно ли мне менять их на именованный вариант?

Для меня код выглядит нормально, просто исправьте две вещи в компоненте MovieList

• при возврате карты добавьте уникальный ключ в div
• заменить ></img> на />