为何for...in循环未正常执行？React组件仅渲染首个元素

你遇到的问题确实是for...in循环的使用方式有误——在循环内部直接写了return语句，导致第一次循环迭代时就直接退出了renderBrandCards函数，后面的循环根本没机会执行，所以只会渲染第一个BrandCard组件。

正确写法示例 #

方案1：收集组件到数组后统一返回

把循环中生成的组件先存入数组，等循环结束后再返回整个数组：

renderBrandCards() { 
  const { marketData } = this.state; 
  const brandCards = [];
  let i = 0; 
  for (const stock in marketData){ 
    i++; 
    brandCards.push(<BrandCard key={i} stock_name={stock} stock_data={marketData[stock]} />);
  } 
  return brandCards; // 循环完成后返回所有组件
} 

方案2：用Object.entries配合map（更推荐）

这是React中处理对象遍历生成组件的常用写法，代码更简洁，还能更合理地设置key：

renderBrandCards() { 
  const { marketData } = this.state; 
  // Object.entries会把对象转成[key, value]形式的数组，再用map遍历生成组件
  return Object.entries(marketData).map(([stock, data]) => (
    <BrandCard 
      key={stock} // 用唯一的stock名称作为key，比索引更稳定（避免顺序变化时的渲染错误）
      stock_name={stock} 
      stock_data={data} 
    />
  ));
} 

关键说明 #

• 原代码中return在循环内部，会直接终止函数执行，所以只返回了第一个组件；必须将所有组件收集为数组后一次性返回。
• 组件的key尽量使用数据中唯一的标识（比如这里的stock名称），而不是循环索引，这样能保证React在更新组件时的性能和正确性。

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