我正在从事一个个人WebApp项目的反应。我对这项技术很陌生,但我非常渴望学习它。我遇到了一个问题。我使用axios从Google响应中获取数据,它可以工作,但是我无法解析嵌套的数据。我的意思是:物品内部有多个片段
{
"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">这是我的完整代码:
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显示了这些属性的存在。
发布于 2020-09-22 20:42:38
问题
您的初始movie状态是一个数组,但是您引用它就好像它是呈现逻辑中的一个对象一样。movie.snippet和movie.thumbnails显然是未定义的。
const [movie, setMovie] = useState([]);和
movie.thumbnails.standard.url解决方案
康斯特电影,setMovie = useState({});
空检查
movie.thumbnails && movie.thumbnails.standard && movie.thumbnails.standard.url || ""或者使用可选链接和零合并。
movie?.thumbnails?.standard?.url ?? ""发布于 2020-09-22 20:38:00
初始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;发布于 2020-09-22 20:38:29
您正在获取错误,因为在获取任何数据之前,您的电影对象是空的。您应该在访问嵌套属性之前进行检查。像这样
<img src ={movie.thumbnails ? `${movie.thumbnails.standard.url}` : ""}/>https://stackoverflow.com/questions/64017254
复制相似问题