使用 React-Native 返回迭代

Question

我使用 React 的时间不长，但我一直运行关注这个问题，每次都试图避免它。

在遍历我的 forloop 时，它给了我两个不同的迭代，正如预期的那样。

输出：

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

{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 < allCards.length; i++) {
    var cardsOnScreen = allCards.map(function (card) {
      return <Card name={allCards[i].name} type={allCards[i].type} />;
    });
  }
  return cardsOnScreen;
}

我一直在尝试将 return 更改为其他内容，因为我认为我的问题就在那里，但是我似乎找不到适合我的情况的替代方案。我的 return 只在对象中 return 保存最后一个对象 x 次。

提前致谢！

Answer 1

替换为：

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

有了这个：

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

您的代码中的问题是：

你正在循环两次，你不需要。
您正在内部循环中重置 cardOnScreen
你没有在循环时设置key

Answer 2

试试这个：

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

使用 React-Native 返回迭代

Returning iterations with React-Native

loops

return

jsx

reactjs

react-native