Javascript 反应：条件呈现-“；无法读取属性'；0'；“无效”的定义；

突出我的问题。我正在尝试向图像道具添加条件渲染。我从API中提取的一些“故事”没有图像，因此我需要对此进行说明，这样我就不会出现“TypeError:Cannot read property'0'of null”错误，但当我添加三元运算符时，这仍然不起作用

；

我可以向“占位符”图像URL添加回退链接吗

img={story.multimedia[0]。url？story.multimedia[0]。url:https://www.example.com/example.png"}

这里是完整的组件

导出默认函数新闻（）{
const[error，setError]=useState（null）；
const[stories，setStory]=useState（null）；
useffect（（）=>{
常量getCurrentPage=（）=>{
constURL=新url（window.location.href）；
const page=url.pathname.split（“/”）.pop（）；
返回页面？页面：“主页”；
};
const section=getCurrentPage（）；
取回(
`https://api.nytimes.com/svc/topstories/v2/${section}.json？api键=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr`
)
.然后（（res）=>res.json（））
。然后（（数据）=>{
设置超时（（）=>设置存储（数据），1500）；
console.log（“成功”，数据）；
})
.catch（（错误）=>{
console.log（“错误”，Error）；
设置错误（错误）；
});
}, []);
如果（错误）{
返回错误：{Error.message}；
}否则，如果（！故事）{
返回；
}否则{
返回(

{stories.results.map（（story，idx）=>{
返回(
);
})}

);
}
}

无法读取null的属性“0”

表明

故事。多媒体

为

null

，未对此进行检查

您可能应该这样扩展您的支票：

story&&story.multimedia&&story.multimedia[0]&&story.multimedia[0]。url？story.multimedia[0]。url:null
story&&story.multimedia&&story.multimedia[0]&&story.multimedia[0]。字幕？story.multimedia[0]。字幕：null

或者如果要使用可选链接（如果您的环境支持）：

story？.multimedia？[0]？.url | |空
故事？.多媒体？[0]？.标题| |空

看起来像

故事。多媒体

可以是

空的

。如果您的环境（例如，通过babel）支持，请使用

故事.多媒体？[0]

，或者去老派学校，使用

故事.多媒体&&story.multimedia[0]

尝试检查类型：

 {  typeof story.multipedia[0].url === "undefined"
     ? img_default
     : story.multimedia[0].url
 }

---

问题是

story.multimedia

为空。错误是在三元条件下抛出的，因此您需要使用

story.multimedia？story.multimedia[0]。url:…

或者，如果您的目标是现代浏览器，则可选链接；

story.multimedia？[0]？.url？story.multimedia[0].url:…

我不知道这是否有帮助，但如果您尝试这样做：img={！story.multimedia[0].url？null:story.multimedia[0].url}如果您使用，您可能甚至不需要三元

img={story？.multimedia？[0]？.url}

由于这是

JSX

，babel无论如何都会传输它，所以很可能不必担心浏览器支持。数组可选链接的语法是

？[0]

，（带点），并且它包含在副本中…如果您真的想要null而不是（可能的话）未定义，使用而不是OR。这是一个很好的观点@HereticMonkey。

|

检查错误的值。可能您仍然希望在这里使用

|

，因为您不太可能想要

url

作为

0

或

”“

，例如，第一个示例非常有效！假设

story.multimedia[0]

=

null

假设

story.multimedia[0]==null

是可能的，您也可以使用

检查它，如果（story.multimedia[0]）