Javascript Can'；三元方程中对象的t访问属性，但在JSX中不起作用？

我有一个对象，如下所示：

campground
{
  "uri": "/campgrounds/long-island-bridge-campground-llc/",
  "acfDetails": {
    "picture": {
      "mediaItemUrl": "/uploads/2021/04/longislandbridge.png"
    }
  }
}

我正在尝试使用三元条件检查campgrand.acfDetails.picture.mediaItemUrl是否存在。现在我有这个代码：

campground.acfDetails.picture.mediaItemUrl != null ? (<img src="campground.acfDetails.picture.mediaItemUrl"></img>) : <> </>

但是，如果我将其更改为：

campground.acfDetails != null ? (<img src="campground.acfDetails.picture.mediaItemUrl" alt="HI"></img>) : <> </>

campground.acfDetails！=无效的() :  

如果图像存在，它将显示该图像，否则只显示“HI”

我不明白为什么物体存在于一个位置，而在另一个位置断裂。希望您能给予指导

---

谢谢大家!

问题在于，在第一个示例中：

campground.acfDetails.picture.mediaItemUrl？() :  
^这里

在这种情况下，如果

campground.acfDetails

是

undefined

或

null

您试图访问

undefined

或

null

的属性，这将引发错误

因此，要真正测试属性

mediaItemUrl

的存在性，如果前面的对象可能是

null

或

未定义的
，则必须插入
？
：

campground.acfDetails？.picture.mediaItemUrl？() :  
^这里
在第一个示例中，问题在于：

campground.acfDetails.picture.mediaItemUrl？() :  
^这里

在这种情况下，如果
campground.acfDetails
是
undefined
或
null
您试图访问
undefined
或
null
的属性，这将引发错误

因此，要真正测试属性
mediaItemUrl
的存在性，如果前面的对象可能是
null
或
未定义的
，则必须插入
？
：

campground.acfDetails？.picture.mediaItemUrl？() :  
^这里
营地建设过程中是否有任何异步操作？
是的，很抱歉，它使用Apollo将营地列表放在一起，然后我通过它们进行映射。设置
src=“campgrand.acfDetails.picture.mediateItemUrl”
将字符串文字分配给
src
，不是您想要的png文件的实际URL。我弄错了吗？对不起，它在一个map语句中循环，因此它确实为它分配了URL。我不知道
map
语句如何用URL替换字符串文字。你能显示更多的代码吗？
campground
的构建过程中是否有任何异步操作？是的，很抱歉，它使用Apollo创建了一个营地列表，然后我通过它们进行映射。设置
src=“campground.acfDetails.picture.mediatemURL”
将字符串文本分配给
src
，不是您想要的png文件的实际URL。我弄错了吗？对不起，它在一个map语句中循环，因此它确实为它分配了URL。我不知道
map
语句如何用URL替换字符串文字。你能展示更多的代码吗？
campground.acfDetails != null ? (<img src="campground.acfDetails.picture.mediaItemUrl" alt="HI"></img>) : <> </>