React中如何在sleep存在时访问嵌套对象的single属性值？

你代码失效的核心原因是：roomFeatures.roomFeature.sleep是普通对象，而map()是数组的专属方法，不能用来遍历对象，因此这段代码无法执行。

要在sleep存在的前提下访问single的值，直接通过对象属性访问即可，同时加上存在性判断避免报错：

方式1：用可选链简化判断 #

{roomFeatures.roomFeature.sleep?.single && (
  <div>
    <span>
      <BsFillPersonFill />
    </span>{" "}
    sleeps {roomFeatures.roomFeature.sleep.single}
  </div>
)}

方式2：提前解构提升可读性 #

如果需要更清晰的逻辑结构，可以先解构出目标属性：

const { sleep } = roomFeatures.roomFeature;

{sleep && sleep.single && (
  <div>
    <span>
      <BsFillPersonFill />
    </span>{" "}
    sleeps {sleep.single}
  </div>
)}

补充：遍历sleep所有属性的场景 #

如果后续需要同时展示single和double的值，可以用Object.entries()把对象转为键值对数组，再用map()遍历：

{roomFeatures.roomFeature.sleep && Object.entries(roomFeatures.roomFeature.sleep).map(([type, count]) => (
  <div key={type}>
    <span>
      <BsFillPersonFill />
    </span>{" "}
    {type} sleeps {count}
  </div>
))}

内容的提问来源于stack exchange，提问作者learning to code