React循环渲染组件数组无内容显示问题求解

核心错误点（直接导致无内容显示） #

• for循环未初始化变量i：for (let i;i < this.props.n;i++)中i没有赋初始值0，此时i为undefined，和数值比较永远返回false，循环一次都不会执行
• 数组push对象错误：循环内执行的是circles.push(<Circle/>)，但circles是你定义的函数，你实际要往存储组件的数组circlesrow里push内容，这行代码完全没有生效
• ReactDOM渲染的挂载节点未正确获取：ReactDOM.render(<App />, root )中root没有提前获取DOM元素，浏览器会因为找不到这个变量抛出报错

不推荐的编码实践 #

• 变量命名语义模糊：circles是函数，circlesrow是存储组件的数组，命名高度相似极易出现调用错误，建议命名区隔更明显，比如数组可以叫circleItemList
• render内部冗余嵌套函数：完全可以直接在return前生成组件数组，不需要额外定义内层函数提升理解成本
• 无props合法性校验：Lottery组件依赖的n属性如果传入非正整数、非数值类型都会导致逻辑出错，建议加props类型校验
• 可变声明滥用：不会被重新赋值的数组/变量建议用const声明，不要一律用let
• 循环渲染组件未加key属性：React要求列表渲染的每一项都要有唯一key标识，否则会抛出性能告警

修复后的代码 #

JS代码 #

function Circle(props) { 
  return(<span className='Circle'>this a circle</span>) 
} 
class Lottery extends React.Component{ 
  constructor(props){ 
    super(props); 
    this.state = {}; 
  } 
  render(){ 
    const circleList = [];
    for (let i = 0;i < this.props.n;i++) { 
      circleList.push(<Circle key={i}/>) 
    }
    return( 
      <div> 
        <div> {circleList} </div> 
      </div> 
    ); 
  } 
} 
function App() { 
  return ( 
    <div className="App"> 
      <Lottery n={9}/> 
      <h1>Hello CodeSandbox</h1> 
      <h2>Start editing to see some magic happen!</h2> 
    </div> 
  ); 
} 
ReactDOM.render(<App />, document.getElementById('root'));

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

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