React类组件调用遍历函数后name属性未在页面显示是什么原因

问题原因 #

你封装的showItems方法缺少返回语句，导致调用后返回值为undefined，因此渲染层没有拿到遍历生成的元素数组，自然不会显示对应内容。
你在map回调内部打印能拿到数据，仅能说明map方法本身正常执行，但遍历生成的React元素数组没有被返回给render函数使用。

修复方案 #

给showItems方法加上return语句，同时建议给遍历生成的元素添加唯一key属性（React列表渲染的强制要求，避免diff警告），修正后的代码如下：

// 修正后的showItems方法
showItems() {
  // 新增return，将map生成的元素数组返回
  return this.state.products.map((el) => {
    // 绑定唯一key，值选数组中唯一不变的id即可
    return <div key={el.id}>{el.name}</div>;
  });
}

也可以用箭头函数隐式返回简化写法：

showItems() {
  return this.state.products.map(el => <div key={el.id}>{el.name}</div>)
}

内容的提问来源于stack exchange，提问作者Johnny Capreano