JavaScript 映射对象答案

【问题标题】：JavaScript Mapping ObjectJavaScript 映射对象
【发布时间】：2020-02-11 22:15:10
【问题描述】：

这是我的代码。我可以获取数据（对象），但是在尝试映射时出现以下错误：类型错误：filme.map 不是函数。输出应该类似于 {“标题”：“复仇者联盟”，“年份”：“2012”，“额定”：“PG-13”，“已发布”：“2012 年 5 月 4 日”，“运行时间”：“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;

【问题讨论】：

filme 开始是一个空数组，但您是说它稍后被分配了一个对象。如果这是真的，那么你不能使用map。 map 只属于数组。
是否有对象替代地图？
setFilme(data.Title) 这似乎也很可疑。您是否将其设置为字符串？
看起来你将字符串（电影标题）分配给film 内getFilme() 正文：setFilme(data.Title)，所以你不能map() 字符串
如果对象是从API返回的，你应该把它全部分配给data，就像setFilme(data)，如果你想map()它的所有属性，使用一些东西，比如@987654333 @

标签： javascript reactjs dictionary object

【解决方案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} />)

【讨论】：

您好，感谢您的解决。我试过了，但我得到：第 32:54 行：'film' 未定义 no-undef 第 32:72 行：'film' 未定义 no-undef
return (

Object.keys(filme).map(film => )
); };导出默认应用；
Object.keys(filme).map(film => ) 应该是这样的 {Object.keys(filme)。地图（电影=> ）}