在 reactjs 中映射数组时，条件仅在第一次出现时满足

Question

我想显示 dollar 总销售额、折扣、税收、净销售额 。但是我下面的代码只显示 总销售额 .

的美元

我的代码

tableHeadings = [
    "month",
    "orders",
    "gross_sales",
    "discounts",
    "tax",
    "net_sales",
  ]

reportData = [
{
    "orders": 119,
    "gross_sales": 21819.610000000008,
    "net_sales": 21819.610000000008,
    "discounts": 865.82,
    "tax": 0,
    "month": "October 2021"
},
{
    "orders": 7,
    "gross_sales": 4542.4,
    "net_sales": 4542.4,
    "discounts": 40,
    "tax": 0,
    "month": "September 2021"
}]

table

<tbody>
  {reportData.length > 0 &&
    tableHeadings.length > 0 &&
    reportData.map((element, index) => (
      <tr key={index}>
        {tableHeadings.map((item, idx) => (
          <td key={idx}>
            {item === ('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent') &&
              dollar}{' '}
            {element[item]}
          </td>
        ))}
      </tr>
    ))}
</tbody>;

当前页面如下所示， current page

预期行为 expectation

Answer 1

应该是

(item === 'gross_sales' || item === 'discounts' || item === 'tax' || item === 'net_sales' || item === 'average_amount' || item === 'total_spent')

你的语法有什么问题？

您正在检查

item === ('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent')

这将执行的是计算表达式

console.log('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent')

它的输出将是 'gross_sales'，这是第一个字符串。所以你的表达式只适用于 'gross_sales'。对于其他所有人，该值将为 false。

Answer 2

您只是在比较项目 ===“gross_sales”，或者您需要分别比较每一项

Ex: item === "gross_sales" || item === "discounts" etc.

但最好的解决方案是将这些选项放在一个数组中，然后 arrayName.includes(item)，应该会给出预期的结果。

Answer 3

问题是您不能像以前那样对 OR 值进行分组。您需要为每个值声明 item 相等。

<tbody>
  {reportData.length > 0 &&
    tableHeadings.length > 0 &&
    reportData.map((element, index) => (
      <tr key={index}>
        {tableHeadings.map((item, idx) => (
          <td key={idx}>
            {(item === 'gross_sales' ||
              item === 'discounts' ||
              item === 'tax' ||
              item === 'net_sales' ||
              item === 'average_amount' ||
              item === 'total_spent') &&
              dollar}{' '}
            {element[item]}
          </td>
        ))}
      </tr>
    ))}
</tbody>;

你在 OR 语句中所做的总是 return gross_sales 字符串。

这是因为 gross_sales 是真实的，它永远不会达到其余的值。这就是为什么你只匹配 'gross_sales'

console.log(('gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent'))

// logs: 'gross_sales

在 reactjs 中映射数组时，条件仅在第一次出现时满足

Condition only satisfying on the first occurance while maping array in reactjs

javascript

arrays

mapping

reactjs