在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。

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

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

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

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

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

result = []

为了更好地理解完整的代码，可以在这里看到

---

我试过把它放在 JSX 之外，并有这个 function：

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

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

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

 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 中调用这个 function，如下所示：

<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}