React循环渲染组件报错求助：无法遍历组件问题

嘿，刚接触React的话遇到这种问题太正常了！我来帮你拆解下代码里的两个关键问题，分分钟搞定循环渲染10次的需求～

问题1：循环里的return直接终止了循环 #

你写的loop函数里，for循环第一次执行到return <UI />的时候，函数就直接结束了，剩下的9次循环根本没机会跑！所以最后只会渲染1个UI组件，而不是10个。

正确的做法是先把所有要渲染的组件存进一个数组，等循环结束后再返回这个数组：

loop = () => {
  // 先创建一个空数组用来存组件
  const uiComponents = [];
  for (let i = 0; i < 10; i++) {
    // 每次循环把UI组件push进数组
    uiComponents.push(
      <UI 
        key={i} // 这里必须加唯一key，React列表渲染的要求
        title="Default Title" 
        discription="the discription for this website is null init!" 
      />
    );
  }
  // 循环结束后返回整个数组
  return uiComponents;
}

问题2：没有调用loop函数 #

在render方法里，你写的是{this.loop}，这相当于把函数本身传给了React，而不是执行函数拿到它返回的组件。必须加上括号调用函数：{this.loop()}，这样React才会执行loop函数并渲染返回的组件数组。

修改后的render方法：

render(){
  return(
    <div>
      {this.loop()}
    </div>
  );
}

额外提醒：关于key属性 #

给循环渲染的每个组件加key是React的硬性要求，它能帮助React高效地识别列表中的每个元素，避免渲染错误。虽然这里用循环变量i当key暂时能用，但如果以后你的列表有新增、删除或排序操作，最好用每个元素独有的标识（比如id）来当key，这样更可靠。

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