React-Native循环迭代渲染组件仅重复显示最后一项问题求助

云原生阿岚

2026-9-26

问题原因

代码逻辑存在两个核心错误：

冗余嵌套了两层遍历：外层是for循环，内层又调用了数组的map方法，等于每次for循环都会重新执行一次map生成新的数组，最终cardsOnScreen是最后一次（也就是i=1时）执行map的结果
map遍历的时候没有使用回调参数里的当前遍历项card，反而强制用allCards[i]取值，最后一次for循环执行时i已经等于1，所以所有生成的Card组件都取到了索引为1的Sensor 2的属性值

修正方案

直接删掉外层的for循环，直接使用map遍历allCards数组，使用回调函数传入的当前项card读取属性即可，同时注意要给列表渲染的每个组件加唯一key属性，这是React列表渲染的强制要求：

export default function SensorCards() {
  const allCards = [
    {name: 'Sensor 1', type: 'Airsensor'},
    {name: 'Sensor 2', type: 'Watersensor'},
  ];

  const cardsOnScreen = allCards.map(function (card) {
    // 用回调里的card变量取当前遍历项的属性，加上唯一key
    return <Card key={card.name} name={card.name} type={card.type} />;
  });
  return cardsOnScreen;
}