从数据库返回的电影数据中提取嵌套导演字段信息时遇到显示问题

问题根因 #

• 接口返回的Director字段为数组类型，而非直接的导演对象，数组本身不存在Name属性，只有数组内的单个元素才包含导演姓名、简介等属性
• 如果你之前尝试访问Array[].name失败，大概率是属性名大小写不匹配：接口返回的姓名字段是首字母大写的Name，而非小写的name

解决方案 #

场景1：确定每部电影仅对应1位导演 #

直接读取数组第一个元素的Name属性即可，增加可选链语法避免数组为空时抛出渲染错误：

<div className = "movie-director">
    <span className = "label">Director: </span>
    <span className = "value">{movie.Director?.[0]?.Name}</span>
</div>

场景2：单部电影可能对应多位导演 #

遍历Director数组拼接所有导演姓名即可：

<div className = "movie-director">
    <span className = "label">Director: </span>
    <span className = "value">
      {movie.Director?.map(dir => dir.Name).join('、') ?? '暂无信息'}
    </span>
</div>

上述代码中?? '暂无信息'的作用是当导演数组为空时，自动展示兜底提示，你可以根据需求自行修改兜底文案。

内容的提问来源于stack exchange，提问作者Simon Hart