扁平化嵌套字典 反应？- 无法读取未定义的属性'standard'

Question

我正在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/nnJeżeli dzisiejszym odcinek Ci się spodobał zostaw like'a albo subskrybcję :DnFanPage:nhttp://facebook.com/RuchOpornikownGoogle+: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">

这是我的完整代码：

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;

你知道什么可能是错误以及如何修复它吗？CCD_ 3和CCD_。

Answer 1

问题

您的初始movie状态是一个数组，但您对它的引用就像它是渲染逻辑中的对象一样。CCD_ 6和CCD_。

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

和

movie.thumbnails.standard.url

解决方案

1. 使初始状态类型与从提取请求更新到的状态以及在呈现逻辑中访问它的方式相匹配，即对象

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

2. 使用正确的null检查并提供回退值。

空检查

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

或使用可选链接和零合并

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

Answer 2

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

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

Answer 3

movie?.thumbnails?.standard?.url应该这样做。看起来movie.thumbnails是undefined

Answer 4

假设movie包含正确的数据，则语法应该有效。下面是一个测试：https://jsfiddle.net/yf470pma/1/

我会添加一个断点并检查真正存在的内容。

Answer 5

初始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;