在 jsx 中替代 .map 进行迭代？

Question

我在我的 jsx 中使用它：

 {item.result && item.result.length
                  ? item.result.map((sale, i) => (sale.month === 1 ? <span key={i}>{sale.itemCount}</span> : 0))
                  : 0}

我正在尝试返回 sale.itemCount（如果存在）和 sale.month = 1。或者，只返回一个 0。

由于地图的影响，当应该显示 0 时，它会显示地图具有迭代的 0 的数量，例如000

当结果数组没有内容或结果数组中不存在匹配的 sale.month 时，如何只显示一个 0？该代码还需要在内联jsx中工作。

我怀疑地图不是正确的使用方法。

以下是结果数组的两个示例：

result = [
    {
        "itemCount": 2,
        "month": 7
    },
    {
        "itemCount": -1,
        "month": 8
    },
    {
        "itemCount": 0,
        "month": 9
    }
]

result = []

为了更好地理解完整代码，可以查看here

---

我已经尝试在 JSX 之外使用它并拥有这个功能：

const searchResultDec = (item) => {
    if (item.result.length === 0) {
      return <span>0</span>; // returns 0 as expected
    }
    if (item.result.length !== 0) {
      item.result.forEach((result) => {
        if (result.month !== 12) {
          return <span>0</span>; // does not return anything
        }
        if (result.month === 12) {
          console.log(result.itemCount); // returns 1 for three items
          return <span>{result.itemCount}</span>; // does not return anything
        }
      });
    }
  };

但是，我在显示预期结果时再次遇到问题，我注意到“不返回任何内容”。

我正在尝试这样显示结果：

<td>
    {searchResultDec(item)}
</td>

还有一个示例结果数组：

const result = [
    {
        "itemCount": 1,
        "month": 8
    },
    {
        "itemCount": 1,
        "month": 12
    }
]

Answer 1

将您的问题分成独立的部分，然后将它们放在一起总是一个好主意。您可能想查看并始终尝试尊重Single Responsibility Principle。如果你这样做，你会写出比 90% 的程序员更好的代码。不幸的是，人类擅长将碎片混合在一起。 :-)

话虽如此，您的代码中有一个逻辑会尝试获取一个月的订单数。因此，为此创建一个单独的函数是有意义的：

const result = [
    {
        "itemCount": 2,
        "month": 7
    },
    {
        "itemCount": -1,
        "month": 8
    },
    {
        "itemCount": 0,
        "month": 9
    }
];

function getItemCountForMonth(orderSummary, month) {
    const monthOrder = orderSummary.find(o => o.month == month);
    return monthOrder ? monthOrder.itemCount : 0;
}

console.log(getItemCountForMonth(result, 7));
console.log(getItemCountForMonth(result, 8));
console.log(getItemCountForMonth(result, 9));
console.log(getItemCountForMonth(result, 10));

现在你应该可以在你的 JSX 中调用这个函数，如下所示：

<td>
    {getItemCountForMonth(result, 1)}
</td>
<td>
    {getItemCountForMonth(result, 2)}
</td>
<td>
    {getItemCountForMonth(result, 3)}
</td>

等等……甚至可以为此创建一个循环。

Array.map 不是您需要的，因为它将创建一个新数组，其中原始数组中的每个条目都有一个条目。这就是为什么它被称为“地图”。它将一个条目映射到一个新条目。

Answer 2

只需返回 null 而不是 0。

{
  item.result && item.result.length
    ? item.result.map((sale, i) =>
        sale.month === 1 ? (
          <span key={i}>{sale.itemCount}</span>
        ) : null,
      )
    : null
}

Answer 3

试试这个：

{item?.result?.length
                  ? item.result.map((sale, i) => 
sale.month === 1? <span key={i}>{sale.itemCount}</span> :0))
                  : 0}