我正在用React做一个个人的WebApp项目。我对这项技术很陌生，但我非常渴望学习它。我遇到了一个问题。我正在使用axios从Google YouTube API响应中获取数据，它可以工作，但我无法解析嵌套的数据。我的意思是：内部项目有多个片段

{
    "items": [
        {
            "snippet": {
                "title": "Dolby Atmos - usłysz więcej!",
                "description": "W dzisiejszym odcinku opowiem wam o tym czym jest nagłośnienie i system dolby atmos. System i nagłośnienie Dolby atmos znajdziemy obecnie w najlepszych kinach. System wspierają takie filmy jak \"Zjawa\" czy \"Kapitan Ameryka wojna bohaterów\". Jakość dźwięk docenią kinomani i prawdziwi audiofile. Istnieje również stworzenia systemu składającego się z głośników dolby atmos kina domowego, ale jest poważna inwestycja.\nJeżeli jesteś z Łodzi i chcesz poczuć Dolby Atmos na własnej skórze kliknij tutaj:\nhttp://www.helios.pl/47,Lodz/StronaGlowna/\n\nJeżeli dzisiejszym odcinek Ci się spodobał zostaw like'a albo subskrybcję :D\nFanPage:\nhttp://facebook.com/RuchOpornikow\nGoogle+:\nhttps://plus.google.com/u/0/+RuchOpor...\nTwitter:\nhttps://twitter.com/RuchOpornikow",
                "thumbnails": {
                    "standard": {
                        "url": "https://i.ytimg.com/vi/QWTk3vnztRw/sddefault.jpg",
                        "width": 640,
                        "height": 480
                    },
                    "maxres": {
                        "url": "https://i.ytimg.com/vi/QWTk3vnztRw/maxresdefault.jpg",
                        "width": 1280,
                        "height": 720
                    }
                },
                "resourceId": {
                    "videoId": "QWTk3vnztRw"
                }
            }
        },

字符串
我想得到一个随机片段的项目，并使用它的标题属性，描述和缩略图。此时我可以访问description和title，但访问movie.description.thumbnails.standard.url或movie.resourceId.videoId时出现错误：

TypeError: Cannot read property 'standard' of undefined
  31 |     backgroundPosition: "center center",
  32 |   }}
  33 | >
> 34 |   <img src ={`${movie.thumbnails.standard.url}`}/>
  35 |     <div className="banner_contents">
  36 |     {/* edge cases */}
  37 |     <h1 className="banner_title">

型
以下是我的完整代码：

function Banner() {
  const [movie, setMovie] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const request = await axios.get("./data.json");
      setMovie(
        request.data.items[
          Math.floor(Math.random() * (request.data.items.length-1))
        ].snippet
      );

      return request;
    }
    fetchData();
  }, []);
  return (
    <header
      className="banner"
      style={{
        backgroundSize: "cover",
        // backgroundImage: `url("${movie.snippet.thumbnails.maxres.url}")`,
        backgroundPosition: "center center",
      }}
    >
      <img src ={`${movie.thumbnails.standard.url}`}/>
      <div className="banner_contents">
        {/* edge cases */}
        <h1 className="banner_title">
          {movie.title}
        </h1>
        <div className="banner_buttons">
          <button className="banner_button">Play</button>
          <button className="banner_button">Original</button>
        </div>
        <h1 className="banner_description">{movie.description}</h1>
      </div>
      <div className="banner--fadeBottom" />
    </header>
  );
}

export default Banner;

型
你知道什么可能是错误以及如何修复它吗？Console.log和JSON.stringify表明这些属性存在。