JavaScript Картографический объект

Question

вот мой код. Я могу получить данные (объект), но при попытке сопоставления я получаю следующую ошибку: TypeError: filme.map не является функцией. Вывод должен выглядеть примерно так: {"Заголовок": "Мстители", "Год": "2012", "Номинальный": "PG-13", "Выпущено": "04 мая 2012", "Время выполнения": "143 мин. "}

import React, { useEffect, useState } from 'react';
import Filme from './Filme';
import "./App.css";


function App() {

    const [filme, setFilme] = useState([]);

    useEffect(  () =>{     
        getFilme();
    },[]);

    const getFilme = async () => {
        const antwort = await fetch(
          'http://www.omdbapi.com/?t=avengers&apikey=xxxx'
          );
        const data = await antwort.json();
        setFilme(data.Title);
        console.log(data.Title);
    };
    //fetch(LINK ZU IMDB DATENBANK)
    //.then(antwort => {  response.json  })

  return  (
      <div className="App">
        <form className="search-form">
          <input className="search-bar" type="text" />
          <button className="search-button" type="submit">Button</button>
        </form>
       {filme.map(filmDat => (
       <Filme />
        ))}
      </div>

  );
};

export default App;

Answer 1

Это ответ, который вы получаете от API.

{
"Title": "The Avengers",
  "Year": "2012",
  "Rated": "PG-13",
  "Released": "04 May 2012",
  "Runtime": "143 min",
  "Genre": "Action, Adventure, Sci-Fi",
  "Director": "Joss Whedon",
  "Writer": "Joss Whedon (screenplay), Zak Penn (story), Joss Whedon (story)",
  "Actors": "Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth",
  "Plot": "Earth's mightiest heroes must come together and learn to fight as a team if they are going to stop the mischievous Loki and his alien army from enslaving humanity.",
  "Language": "English, Russian, Hindi",
  "Country": "USA",
  "Awards": "Nominated for 1 Oscar. Another 38 wins & 79 nominations.",
  "Poster": "https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg",
  "Ratings": [
    {
      "Source": "Internet Movie Database",
      "Value": "8.0/10"
    },
    {
      "Source": "Rotten Tomatoes",
      "Value": "91%"
    },
    {
      "Source": "Metacritic",
      "Value": "69/100"
    }
  ],
  "Metascore": "69",
  "imdbRating": "8.0",
  "imdbVotes": "1,216,895",
  "imdbID": "tt0848228",
  "Type": "movie",
  "DVD": "25 Sep 2012",
  "BoxOffice": "$623,279,547",
  "Production": "Walt Disney Pictures",
  "Website": "N/A",
  "Response": "True"
}

Вы присваиваете значение Title для фильма, который является строкой, и вы пытаетесь отобразить строку, которая не будет работать , Вместо

setFilme(data);

и назначенное значение является объектом, поэтому вы можете использовать

Object.keys(filme).map(film => <Filme title={film} data={filme[film]} />)

или

Object.entries(filme).map(([title, data]) => <Filme title={title} data={data} />)