在 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"
}]

桌子

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

當前頁面如下所示，當前頁面

預期行為預期

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' 。 其余的，該值將為假。

Answer 2

您只是在比較 item === "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 語句中所做的你總是返回gross_sales字符串。

這是因為gross_sales是thruty，它永遠不會去到其余的值。 這就是為什么你只匹配'gross_sales'

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

// logs: 'gross_sales