SPFX WebPart中列表模板编号转友好名称无返回值问题排查

我们正在开发SPFX WebPart，用于拉取SharePoint站点的列表及列表模板。初始代码可正常渲染列表标题与模板编号：

public render(): React.ReactElement<IGetSpListsProps> {
return (
<div>
  <ol>
    {    
        this.state.sitecontents.map(function(mylists,mylistitemkey){
        return(
        <li>
        <span>{mylists.Title}</span> &emsp; <span>{mylists.BaseTemplate}</span>
        </li>);
      })
    }
    </ol>
</div>
);
}

实际需求是将模板编号转为对应友好名称（如100=Custom List、101=Document Lib等），我们已创建包含编号与友好名称映射关系的TS文件并导入至TSX文件中。修改后的代码如下，虽条件判断可触发（console.log有输出），但无任何渲染内容：

<ol>
    {    
        this.state.sitecontents.map(function(mylists,mylistitemkey){
          listtempates.filter((a:any) =>{
          if(a.Code === mylists.BaseTemplate)
          {
          return(
        <li>
        <span>{mylists.Title}</span> &emsp; <span>{a.Code}</span>
        </li>)}});
      })
    }
</ol>

问题原因 #

• 外层map无返回值：map函数没有返回任何内容，内部filter的执行结果没有被传递到外层，React无法获取到要渲染的元素数组。
• filter用法错误：filter的作用是筛选数组元素，它仅根据回调返回的布尔值保留元素，在回调里返回React元素是无效操作，不会产生渲染内容。

修复方案 #

用find替代filter（每个模板编号对应唯一名称，find更高效），在map中直接返回渲染的li元素：

<ol>
    {    
        this.state.sitecontents.map((mylists, mylistitemkey) => {
            // 匹配当前列表对应的模板信息
            const matchedTemplate = listtempates.find((a: any) => a.Code === mylists.BaseTemplate);
            // 兜底处理无匹配模板的情况
            const templateName = matchedTemplate ? matchedTemplate.Name : 'Unknown Template';
            return(
                <li key={mylistitemkey}>
                    <span>{mylists.Title}</span> &emsp; <span>{templateName}</span>
                </li>
            );
        })
    }
</ol>

额外优化建议 #

• 改用箭头函数，避免后续可能出现的this指向问题
• 给li添加唯一key属性，符合React列表渲染最佳实践
• 增加无匹配模板的兜底逻辑，避免页面异常

内容的提问来源于stack exchange，提问作者kmurali krishna