React Native循环内无法动态创建渲染元素问题求助

问题原因 #

你遇到的渲染失效问题核心是forEach方法没有返回值：JSX 中内嵌的{ }代码块需要返回React元素/元素数组才会被渲染到页面上，forEach仅执行遍历逻辑，不会返回任何内容，因此React没有拿到需要渲染的组件列表。
另外你贴出的循环内JSX写法存在语法疏漏：<MyCustomComponentname={name} />中组件名和属性之间缺少空格，正确写法应为<MyCustomComponent name={name} />，如果是粘贴代码时的输入误差忽略即可。

解决方案 #

将forEach替换为map方法，map会将每次迭代返回的组件组装为数组返回，直接符合JSX的渲染要求，同时需要为每个列表项添加唯一的key属性，避免React渲染异常。

写法1：JSX语法 #

{Object.entries(this.state.topTen).map(([name]) => (
  // 若name值唯一，优先用name作为key，否则可替换为其他唯一标识
  <MyCustomComponent name={name} key={name} />
))}

写法2：React.createElement语法 #

{Object.entries(this.state.topTen).map(([name]) => 
  React.createElement(MyCustomComponent, { name: name, key: name })
)}

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