React+GraphQL获取列表时addOns字段渲染报错问题排查

错误原因 #

hotelDetails.addOns是数组类型（HotelAddOnsType[]），数组本身并不包含name和description属性——这些属性属于数组中的每一个HotelAddOnsType元素。直接通过数组访问这些属性，TypeScript会抛出类型错误。

解决方案 #

1. 遍历所有附加服务（常用场景）

如果需要展示所有附加服务，使用数组的map方法遍历每个元素：

{hotelDetails.addOns.map((addOn, index) => (
  <div key={index}>
    <Text>{addOn.name}</Text>
    <Text>{addOn.description}</Text>
  </div>
))}

• 注意给每个遍历项添加唯一key（这里用index，如果addOn有唯一ID字段，优先用ID）。

2. 访问单个附加服务

如果只需要展示数组中的某一个附加服务（比如第一个），直接通过数组索引访问，同时建议添加边界判断避免空数组报错：

{hotelDetails.addOns.length > 0 && (
  <>
    <Text>{hotelDetails.addOns[0].name}</Text>
    <Text>{hotelDetails.addOns[0].description}</Text>
  </>
)}

额外提示 #

如果接口返回的addOns可能为空数组，务必添加长度判断或可选链操作（hotelDetails.addOns[0]?.name），防止运行时出现Cannot read properties of undefined的错误。

内容的提问来源于stack exchange，提问作者Ced D