首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >扁平嵌套字典反应?-无法读取未定义的属性“标准”。

扁平嵌套字典反应?-无法读取未定义的属性“标准”。
EN

Stack Overflow用户
提问于 2020-09-22 20:30:01
回答 5查看 346关注 0票数 1

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

代码语言:javascript
复制
{
    "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会给出一个错误。

代码语言:javascript
复制
    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">

这是我的完整代码:

代码语言:javascript
复制
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显示了这些属性的存在。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2020-09-22 20:42:38

问题

您的初始movie状态是一个数组,但是您引用它就好像它是呈现逻辑中的一个对象一样。movie.snippetmovie.thumbnails显然是未定义的。

代码语言:javascript
复制
const [movie, setMovie] = useState([]);

代码语言:javascript
复制
movie.thumbnails.standard.url

解决方案

  1. 使初始状态类型与从提取请求更新到的状态类型匹配,以及如何在呈现逻辑(即对象)中访问它

康斯特电影,setMovie = useState({});

  1. 使用正确的空检查并提供回退值.

空检查

代码语言:javascript
复制
movie.thumbnails && movie.thumbnails.standard && movie.thumbnails.standard.url || ""

或者使用可选链接和零合并。

代码语言:javascript
复制
movie?.thumbnails?.standard?.url ?? ""
票数 0
EN

Stack Overflow用户

发布于 2020-09-22 20:38:00

初始movie是一个空数组,从API获取需要一段时间。重构到下面

代码语言:javascript
复制
  const [movie, setMovie] = useState();

在呈现之前,检查电影是否为空

代码语言:javascript
复制
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;
票数 0
EN

Stack Overflow用户

发布于 2020-09-22 20:38:29

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

代码语言:javascript
复制
 <img src ={movie.thumbnails ? `${movie.thumbnails.standard.url}` : ""}/>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64017254

复制
相关文章

相似问题

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