Javascript 展平嵌套字典无法读取属性'；标准&x27；未定义的

我在React从事一个个人网络应用项目。我对这项技术不熟悉，但非常渴望学习。我遇到了一个问题。我正在使用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"
                }
            }
        },

我想从项目中获取一个随机片段，并使用它的标题属性、描述和缩略图。 此时，我可以访问描述和标题，但访问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">

TypeError:无法读取未定义的属性“standard”
31 |背景位置：“中心”，
32 |   }}
33 | >
> 34 |   
35 |     
36{/*边情况*/}
37 |     

这是我的全部代码：

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;

function Banner（）{
const[movie，setMovie]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
const request=wait axios.get（“./data.json”）；
布景电影(
请求.数据.项目[
Math.floor（Math.random（）*（request.data.items.length-1））
].片段
);
返回请求；
}
fetchData（）；
}, []);
返回(
{/*边案例*/}
{movie.title}
玩
起初的
{movie.description}
);
}
导出默认横幅；

---

您知道什么可能是错误以及如何修复它吗？Console.log和JSON.stringify显示这些属性在那里。

initial

movie

是一个空数组，从API中提取需要一些时间。重构到下面的

  const [movie, setMovie] = useState();

并在渲染前检查电影是否为空

return movie?(
<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>
):null;

回归电影( {/*边案例*/} {movie.title} 玩 起初的 {movie.description} )：null；

---

initial

movie

是一个空数组，从API获取它需要一些时间。重构到下面的

  const [movie, setMovie] = useState();

并在渲染前检查电影是否为空

return movie?(
<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>
):null;

回归电影( {/*边案例*/} {movie.title} 玩 起初的 {movie.description} )：null；

---

您将收到错误，因为在获取任何数据之前，您的电影对象是空的。您应该在访问嵌套属性之前进行检查。像这样

 <img src ={movie.thumbnails ? `${movie.thumbnails.standard.url}` : ""}/>

---

您将收到错误，因为在获取任何数据之前，您的电影对象是空的。您应该在访问嵌套属性之前进行检查。像这样

 <img src ={movie.thumbnails ? `${movie.thumbnails.standard.url}` : ""}/>

movie？.thumbnails？.standard？.url

应该可以。看起来像电影。缩略图未定义

movie？。缩略图？.standard？.url

应该可以。看起来像

movie。缩略图
未定义
假设
movie
包含正确的数据，语法应该有效。这里有一个测试：

我将添加一个断点并检查实际存在的内容。
假设
movie
包含正确的数据，语法应该可以工作。这里有一个测试：

我会添加一个断点并检查实际存在的问题。
Issue（s）
您的初始
movie
状态是一个数组，但您将其作为渲染逻辑中的对象引用<代码>电影。片段
和
电影。缩略图
显然未定义

const [movie, setMovie] = useState([]);

及

解决方案
使初始状态类型与从获取请求更新到的状态类型以及在呈现逻辑中访问的方式（即对象）匹配

const [movie, setMovie] = useState({});


使用适当的空检查并提供回退值


空检查

movie.thumbnails && movie.thumbnails.standard && movie.thumbnails.standard.url || ""

或者使用可选的链接和空合并

movie?.thumbnails?.standard?.url ?? ""

问题
您的初始
movie
状态是一个数组，但您将其作为渲染逻辑中的对象引用<代码>电影。片段
和
电影。缩略图
显然未定义

const [movie, setMovie] = useState([]);

及

解决方案
使初始状态类型与从获取请求更新到的状态类型以及在呈现逻辑中访问的方式（即对象）匹配

const [movie, setMovie] = useState({});


使用适当的空检查并提供回退值


空检查

movie.thumbnails && movie.thumbnails.standard && movie.thumbnails.standard.url || ""

或者使用可选的链接和空合并

movie?.thumbnails?.standard?.url ?? ""

您的
movie
状态是一个数组，但您引用它就像它是渲染逻辑中的对象一样<代码>电影。片段

和

电影。缩略图

显然未定义。如何访问这些元素？回答如下，但在初始渲染时

电影

是一个数组，没有我调用的属性。将其转换为空对象将使您更接近，但在进一步引用到状态对象时会延迟“未定义”状态，因此会添加一些空检查。您的

电影

状态是一个数组，但您将其引用为渲染逻辑中的对象<代码>电影。片段和

电影。缩略图

显然未定义。如何访问这些元素？回答如下，但在初始渲染时

电影

是一个数组，没有我调用的属性。将其转换为空对象会使您更接近，但在进一步引用到您的状态对象时会延迟“未定义”的时间，从而增加一些空检查。因此，我所做的错误是尝试访问数组的元素，就像它是js对象一样，但由于数据结构的性质，元素根本不存在。解决方案是将change type从[]访问到{}对象，对吗？@szymonindy是的，这是问题的一半。对象是键-值对的关联数组，可以将数组视为特殊对象，其中键是数组索引。数组将没有名为“缩略图”的索引，即

电影[“缩略图”]//未定义的

。当您深入访问未定义的对象时