首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ReactJs json映射在加载后返回未定义的

ReactJs json映射在加载后返回未定义的
EN

Stack Overflow用户
提问于 2022-03-24 18:05:23
回答 2查看 189关注 0票数 0

因此,我获取一个API调用,然后尝试迭代,以便显示为一个列表。到目前为止我的代码是:

代码语言:javascript
复制
import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [trendingMovies, setTrendingMovies] = useState();

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/all/day?api_key=***"
    )
      .then((res) => res.json())
      .then((results) => console.log(results))
      .then((data) => setTrendingMovies(data))
      .catch((error) => console.log(error))
      .then(setIsLoading(false));
  }, [trendingMovies]);

  function Loading() {
    return <h1>Loading...</h1>;
  }

  function DisplayTrendingMovies() {
    return (
      <>
        <p>Trending:</p>
        {console.log(trendingMovies)}
        <ul>
          {trendingMovies &&
            trendingMovies.map((movie) => (
              <li key={movie.results}>{movie.results.original_title}</li>
            ))}
        </ul>
      </>
    );
  }

  return <>{isLoading ? Loading() : DisplayTrendingMovies()}</>;
}

export default App;

实际上,json加载,一个示例调用是:

代码语言:javascript
复制
  {"page": 1,
  "results": [
    {
      "genre_ids": [28, 12, 878],
      "original_language": "en",
      "original_title": "Spider-Man: No Way Home",
      "poster_path": "/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg",
      "video": false,
      "vote_average": 8.2,
      "vote_count": 9831,
      "overview": "Peter Parker is unmasked and no longer able to separate his normal life from the high-stakes of being a super-hero. When he asks for help from Doctor Strange the stakes become even more dangerous, forcing him to discover what it truly means to be Spider-Man.",
      "release_date": "2021-12-15",
      "title": "Spider-Man: No Way Home",
      "id": 634649,
      "adult": false,
      "backdrop_path": "/iQFcwSGbZXMkeyKrxbPnwnRo5fl.jpg",
      "popularity": 9675.798,
      "media_type": "movie"
    },
    {
      "adult": false,
      "backdrop_path": "/qswImgf57wBf2i8Fv6K2O2BdMoe.jpg",
      "genre_ids": [53, 10749, 18],
      "id": 619979,
      "original_language": "en",
      "original_title": "Deep Water",
      "overview": "Vic and Melinda Van Allen are a couple in the small town of Little Wesley. Their loveless marriage is held together only by a precarious arrangement whereby, in order to avoid the messiness of divorce, Melinda is allowed to take any number of lovers as long as she does not desert her family.",
      "poster_path": "/6yRMyWwjuhKg6IU66uiZIGhaSc8.jpg",
      "release_date": "2022-03-18",
      "title": "Deep Water",
      "video": false,
      "vote_average": 6.0,
      "vote_count": 1,
      "popularity": 111.471,
      "media_type": "movie"
    },
    {
      "genre_ids": [28, 53],
      "original_language": "sv",
      "original_title": "Svart krabba",
      "poster_path": "/mcIYHZYwUbvhvUt8Lb5nENJ7AlX.jpg",
      "id": 760868,
      "vote_average": 0.0,
      "overview": "To end an apocalyptic war and save her daughter, a reluctant soldier embarks on a desperate mission to cross a frozen sea carrying a top-secret cargo.",
      "release_date": "2022-03-18",
      "vote_count": 0,
      "video": false,
      "adult": false,
      "backdrop_path": "/w8pSD1jVt2OzBCr8QQTTjk0mBHt.jpg",
      "title": "Black Crab",
      "popularity": 41.066,
      "media_type": "movie"
    },
    {
      "genre_ids": [16, 10751, 35, 14],
      "original_language": "en",
      "original_title": "Turning Red",
      "poster_path": "/qsdjk9oAKSQMWs0Vt5Pyfh6O4GZ.jpg",
      "video": false,
      "vote_average": 7.4,
      "vote_count": 565,
      "overview": "Thirteen-year-old Mei is experiencing the awkwardness of being a teenager with a twist – when she gets too excited, she transforms into a giant red panda.",
      "release_date": "2022-03-10",
      "title": "Turning Red",
      "id": 508947,
      "adult": false,
      "backdrop_path": "/iPhDToxFzREctUA0ZQiYZamXsMy.jpg",
      "popularity": 7663.359,
      "media_type": "movie"
    },
    {
      "video": false,
      "vote_average": 6.0,
      "overview": "At an elite New England university built on the site of a Salem-era gallows hill, three black women strive to find their place. Navigating politics and privilege, they encounter increasingly terrifying manifestations of the school's haunted past… and present.",
      "release_date": "2022-03-18",
      "vote_count": 1,
      "adult": false,
      "backdrop_path": "/bW0zTTdvc9zafc6hDEG1pMDuMCW.jpg",
      "title": "Master",
      "genre_ids": [27, 53, 18, 9648],
      "id": 680829,
      "original_language": "en",
      "original_title": "Master",
      "poster_path": "/gxbwRHsQ2v6DQv28ttp7pIx7Utj.jpg",
      "popularity": 37.859,
      "media_type": "movie"
    },
    {
      "id": 850018,
      "poster_path": "/r3eGUCijDCNqwcP1Ri8AZyTbPzI.jpg",
      "video": false,
      "vote_average": 0.0,
      "overview": "A man breaks into a tech billionaire's empty vacation home, but things go sideways when the arrogant mogul and his wife arrive for a last-minute getaway.",
      "release_date": "2022-03-11",
      "vote_count": 0,
      "adult": false,
      "backdrop_path": "/cc7Nmid20lcfNh1eucWdLKidi7s.jpg",
      "title": "Windfall",
      "genre_ids": [80, 18, 53],
      "original_title": "Windfall",
      "original_language": "en",
      "popularity": 12.777,
      "media_type": "movie"
    },
    {
      "id": 691683,
      "video": false,
      "title": "Cheaper by the Dozen",
      "overview": "This remake of the beloved classic follows the raucous exploits of a blended family of 12, the Bakers, as they navigate a hectic home life while simultaneously managing their family business.",
      "release_date": "2022-03-18",
      "vote_count": 1,
      "adult": false,
      "backdrop_path": "/4YOpxmGyQZFELwLB7JqcpYKnmKw.jpg",
      "vote_average": 10.0,
      "genre_ids": [35, 10751, 18],
      "poster_path": "/qNRsouZh5zmhaE3n4QpLDXzy1gQ.jpg",
      "original_language": "en",
      "original_title": "Cheaper by the Dozen",
      "popularity": 43.263,
      "media_type": "movie"
    },
    {
      "title": "The Adam Project",
      "overview": "After accidentally crash-landing in 2022, time-traveling fighter pilot Adam Reed teams up with his 12-year-old self on a mission to save the future.",
      "release_date": "2022-03-11",
      "adult": false,
      "backdrop_path": "/ewUqXnwiRLhgmGhuksOdLgh49Ch.jpg",
      "genre_ids": [878, 12, 35],
      "vote_count": 705,
      "original_language": "en",
      "original_title": "The Adam Project",
      "poster_path": "/wFjboE0aFZNbVOF05fzrka9Fqyx.jpg",
      "video": false,
      "id": 696806,
      "vote_average": 7.0,
      "popularity": 2137.891,
      "media_type": "movie"
    },
    {
      "adult": false,
      "backdrop_path": "/zQG1FYDqoWo2hYhE5GVZ1yrWSfh.jpg",
      "genre_ids": [10751, 18],
      "id": 921655,
      "original_language": "en",
      "original_title": "Rescued by Ruby",
      "overview": "Chasing his dream to join an elite K-9 unit, a state trooper partners with a fellow underdog: clever but naughty shelter pup Ruby. Based on a true story.",
      "poster_path": "/tPlJEodEn0SSV4avo8KSawtlTlN.jpg",
      "release_date": "2022-03-17",
      "title": "Rescued by Ruby",
      "video": false,
      "vote_average": 7.4,
      "vote_count": 6,
      "popularity": 47.237,
      "media_type": "movie"
    },
    {
      "overview": "In his second year of fighting crime, Batman uncovers corruption in Gotham City that connects to his own family while facing a serial killer known as the Riddler.",
      "release_date": "2022-03-01",
      "adult": false,
      "backdrop_path": "/5P8SmMzSNYikXpxil6BYzJ16611.jpg",
      "id": 414906,
      "genre_ids": [80, 9648, 53],
      "original_language": "en",
      "original_title": "The Batman",
      "poster_path": "/74xTEgt7R36Fpooo50r9T25onhq.jpg",
      "vote_count": 1981,
      "video": false,
      "vote_average": 8.0,
      "title": "The Batman",
      "popularity": 2675.235,
      "media_type": "movie"
    },
    {
      "release_date": "2022-03-17",
      "adult": false,
      "backdrop_path": "/trtFAmf4IcndxSh5tIfLwxPyW67.jpg",
      "genre_ids": [28, 53],
      "vote_count": 4,
      "original_language": "en",
      "original_title": "Panama",
      "poster_path": "/82I3tDsGDTMy7lHar84Gz0jUuyW.jpg",
      "title": "Panama",
      "video": false,
      "vote_average": 6.0,
      "id": 628878,
      "overview": "An ex-marine is hired by a defense contractor to travel to Panama to complete an arms deal. In the process he becomes involved with the U.S. invasion of Panama, and learns an important lesson about the true nature of political power.",
      "popularity": 40.113,
      "media_type": "movie"
    },
    {
      "backdrop_path": "/fUjATGfykF0EU57DhMDkIXqQlc5.jpg",
      "first_air_date": "2022-03-17",
      "genre_ids": [18, 10765],
      "id": 113566,
      "name": "DMZ",
      "origin_country": ["US"],
      "original_language": "en",
      "original_name": "DMZ",
      "overview": "In the near future after a bitter civil war leaves Manhattan a demilitarized zone (DMZ), destroyed and isolated from the rest of the world, fierce medic Alma Ortega sets out on a harrowing journey to find the son she lost in the evacuation of New York City at the onset of the conflict. Standing in her way are gangs, militias, demagogues and warlords, including Parco Delgado, the popular — and deadly — leader of one of the most powerful gangs in the DMZ.",
      "poster_path": "/wnug9DhsenurS5dWCypjZSRFnH6.jpg",
      "vote_average": 10.0,
      "vote_count": 3,
      "popularity": 66.357,
      "media_type": "tv"
    },
    {
      "backdrop_path": "/x8KTttToqfHC92JiD2Cs8WWkBG7.jpg",
      "genre_ids": [18],
      "original_language": "en",
      "poster_path": "/rFlYeo84b5YtzNkN0IonN6ZCPic.jpg",
      "first_air_date": "2022-03-17",
      "vote_average": 0.0,
      "original_name": "WeCrashed",
      "origin_country": ["US"],
      "vote_count": 0,
      "overview": "Inspired by actual events — and the love story at the center of it all. WeWork grew from a single coworking space into a global brand worth $47 billion in under a decade. Then, in less than a year, its valuation dropped $40 billion. What happened?",
      "id": 117821,
      "name": "WeCrashed",
      "popularity": 61.183,
      "media_type": "tv"
    },
    {
      "vote_average": 7.1,
      "title": "Nightmare Alley",
      "overview": "An ambitious carnival man with a talent for manipulating people with a few well-chosen words hooks up with a female psychiatrist who is even more dangerous than he is.",
      "release_date": "2021-12-02",
      "id": 597208,
      "adult": false,
      "backdrop_path": "/g0YNGpmlXsgHfhGnJz3c5uyzZ1B.jpg",
      "genre_ids": [80, 18, 53],
      "original_language": "en",
      "original_title": "Nightmare Alley",
      "poster_path": "/vfn1feL0V9HNSXuLLpaxAW8O6LO.jpg",
      "vote_count": 1055,
      "video": false,
      "popularity": 1099.529,
      "media_type": "movie"
    },
    {
      "genre_ids": [18, 35],
      "original_language": "en",
      "original_title": "Dog",
      "poster_path": "/zHQy4h36WwuCetKS7C3wcT1hkgA.jpg",
      "id": 626735,
      "vote_average": 7.6,
      "overview": "An army ranger and his dog embark on a road trip along the Pacific Coast Highway to attend a friend's funeral.",
      "release_date": "2022-02-17",
      "vote_count": 110,
      "video": false,
      "adult": false,
      "backdrop_path": "/8T7SS4jU7TmtqrUr45JgZASCTUP.jpg",
      "title": "Dog",
      "popularity": 200.167,
      "media_type": "movie"
    },
    {
      "adult": false,
      "backdrop_path": "/zOVxbbt8BrrjWBJ0eO21S2adUvo.jpg",
      "genre_ids": [35],
      "id": 776328,
      "original_language": "it",
      "original_title": "Marilyn ha gli occhi neri",
      "overview": "Clara and Diego, under the guidance of the psychiatrist of a day rehabilitation center for disturbed people who attend, decide to transform the treatment center into a restaurant, involving all their other companions.",
      "poster_path": "/thHmfbg56EDMCTmjEuz6Xo5M8hV.jpg",
      "release_date": "2021-10-14",
      "title": "Marilyn's Eyes",
      "video": false,
      "vote_average": 6.9,
      "vote_count": 136,
      "popularity": 29.106,
      "media_type": "movie"
    },
    {
      "id": 93544,
      "overview": "Two seasoned drug dealers return to the gritty street of London, but their pursuit of money and power is threatened by a young and ruthless hustler.",
      "name": "Top Boy",
      "vote_count": 14,
      "vote_average": 8.9,
      "backdrop_path": "/4CqfqazO2EBhN469XfIp7RSJZ7h.jpg",
      "original_language": "en",
      "genre_ids": [80, 18],
      "first_air_date": "2019-09-13",
      "original_name": "Top Boy",
      "origin_country": [],
      "poster_path": "/mGZpOEaLZTRzWeQMq5SZM5BbDZg.jpg",
      "popularity": 66.767,
      "media_type": "tv"
    },
    {
      "backdrop_path": "/3vOh84wLx47L1vhNTUuf1Z0zv2i.jpg",
      "genre_ids": [10765],
      "original_language": "pl",
      "poster_path": "/bBzkreVliFn18zFBjysanZnC3Yq.jpg",
      "first_air_date": "2022-03-18",
      "vote_average": 0.0,
      "original_name": "Krakowskie potwory",
      "origin_country": ["PL"],
      "vote_count": 0,
      "overview": "A young woman haunted by her past joins a mysterious professor and his group of gifted students who investigate paranormal activity — and fight demons.",
      "id": 158396,
      "name": "Cracow Monsters",
      "popularity": 24.704,
      "media_type": "tv"
    },
    {
      "backdrop_path": "/ifUfE79O1raUwbaQRIB7XnFz5ZC.jpg",
      "genre_ids": [27, 9648, 53],
      "original_language": "en",
      "original_title": "Scream",
      "poster_path": "/kZNHR1upJKF3eTzdgl5V8s8a4C3.jpg",
      "video": false,
      "vote_average": 6.8,
      "vote_count": 937,
      "overview": "Twenty-five years after a streak of brutal murders shocked the quiet town of Woodsboro, a new killer has donned the Ghostface mask and begins targeting a group of teenagers to resurrect secrets from the town’s deadly past.",
      "release_date": "2022-01-12",
      "id": 646385,
      "title": "Scream",
      "adult": false,
      "popularity": 1191.305,
      "media_type": "movie"
    },
    {
      "original_language": "en",
      "original_title": "Loveland",
      "poster_path": "/zVxFQG0rAFITjIygEMHFRLtR6JI.jpg",
      "video": false,
      "id": 659924,
      "release_date": "2022-03-17",
      "vote_count": 0,
      "adult": false,
      "backdrop_path": "/2QerJOQmmWcINcM1S1sNkDxjXkj.jpg",
      "genre_ids": [878, 10749, 53],
      "vote_average": 0.0,
      "overview": "In an uncharted future, two hardened souls meet and confront each other with the things they have done and what they have become.",
      "title": "Loveland",
      "popularity": 32.544,
      "media_type": "movie"
    }
  ],
  "total_pages": 1000,
  "total_results": 20000
}

但我从来没有得到迭代的ul元素。我认为这在某种程度上与我如何运行我的useEffect有关,因为在日志中,我在json调用完成之前就没有定义,正确的json (尽管它没有将/显示为ul元素),然后是另一个未定义的json。

有什么指示吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-03-24 18:15:31

我认为问题在于如何处理fetch api的承诺。.then ((结果) => console.log(结果))似乎返回未定义的数据,下面的.then以未定义的形式接收数据。请像下面这样试一试,让我知道它是否有效!

代码语言:javascript
复制
    import React, { useState, useEffect } from "react";

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [trendingMovies, setTrendingMovies] = useState();

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/all/day?api_key=***"
    )
      .then((res) => res.json())
      .then((data) => setTrendingMovies(data.results))
      .catch((error) => console.log(error))
      .then(setIsLoading(false));
  }, []);

  function Loading() {
    return <h1>Loading...</h1>;
  }

  function DisplayTrendingMovies() {
    return (
      <>
        <p>Trending:</p>
        {console.log(trendingMovies)}
        <ul>
          {trendingMovies &&
            trendingMovies.map((movie) => (
              <li key={movie.name}>{movie.original_title}</li>
            ))}
        </ul>
      </>
    );
  }

  return <>{isLoading ? Loading() : DisplayTrendingMovies()}</>;
}

export default App;

票数 1
EN

Stack Overflow用户

发布于 2022-03-24 18:32:49

试试这个:

代码语言:javascript
复制
  useEffect(() => {           
          fetch("https://api.themoviedb.org/3/trending/all/day?api_key=***")
                .then((data) => data.json())
                .then((data) => setTrendingMovies(data))
                .catch((err) => console.log(err));
                .then(setIsLoading(false));

  }, []);
代码语言:javascript
复制
{trendingMovies?.results?.map((movie) => (
              <li key={movie.results}>{movie.results.original_title}</li>
            ))}

问号允许组件等待直到trendingMovies数组拥有数据。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71607417

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档