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

【问题标题】：Condition only satisfying on the first occurance while maping array in reactjs在reactjs中映射数组时仅在第一次出现时满足条件
【发布时间】：2021-12-06 10:21:38
【问题描述】：

我想显示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"
}]

表格

<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

【问题讨论】：

'gross_sales' || 'discounts' || 'tax' || 'net_sales' || 'average_amount' || 'total_spent' 等于集合中的第一个真值，即'gross_sales'。

标签： javascript arrays reactjs mapping

【解决方案1】：

问题是您不能像以前那样对 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 语句中所做的总是返回 gross_sales 字符串。

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

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

// logs: 'gross_sales

【讨论】：

【解决方案2】：

应该是

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

【讨论】：

【解决方案3】：

您只是在比较 item === "gross_sales"，或者您需要分别比较它们

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

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

【讨论】：