Блог

Я использую React не слишком долго, но я продолжаю сталкиваться с этой проблемой, каждый раз пытаясь избежать ее.

После итерации через мой forloop он дает мне две разные итерации, как и ожидалось.

Выход:

{name: "Sensor 1", type: "Airsensor"}

{name: "Sensor 2", type: "Watersensor"}

Однако мой код, похоже, использует только вторую итерацию.

Вывод на экран:

{name: "Sensor 2", type: "Watersensor"}

{name: "Sensor 2", type: "Watersensor"}

Код, о котором идет речь, является:

 export default function SensorCards() {  let allCards = [  {name: 'Sensor 1', type: 'Airsensor'},  {name: 'Sensor 2', type: 'Watersensor'},  ];   for (let i = 0; i lt; allCards.length; i  ) {  var cardsOnScreen = allCards.map(function (card) {  return lt;Card name={allCards[i].name} type={allCards[i].type} /gt;;  });  }  return cardsOnScreen; }  

Я продолжаю пытаться изменить возврат на что-то другое, потому что я думаю, что моя проблема заключается в этом, однако я, похоже, не могу найти альтернативу для своей ситуации. Мое возвращение продолжает возвращать только последний объект x раз в объектах.

Заранее спасибо!

Замените это:

 for (let i = 0; i lt; allCards.length; i  ) {  var cardsOnScreen = allCards.map(function (card) {  return lt;Card name={allCards[i].name} type={allCards[i].type} /gt;;  });  }  return cardsOnScreen;  

с этим:

 return allCards.map((card) =gt; (  lt;Card key={card.name} name={card.name} type={card.type} /gt;  ));   

Проблема в вашем коде заключается в следующем:

1. Вы повторяете цикл дважды, вам это не нужно.
2. Вы сбрасываете cardOnScreen во внутреннем цикле
3. Вы не устанавливаете настройки key при циклическом выполнении

Попробуй это:

 export default function SensorCards() {  let allCards = [  {name: 'Sensor 1', type: 'Airsensor'},  {name: 'Sensor 2', type: 'Watersensor'},  ];  return (  lt;gt;  { allCards.map((card) =gt; (  lt;Card key={card.name} name={card.name} type={card.type} /gt;  ))}  lt;/gt;  ) }