在reactjs中映射陣列時僅滿足第一次出現的條件-有解無憂

我想說明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>;

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

預期行為 預期

uj5u.com熱心網友回復：

它應該是

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

uj5u.com熱心網友回復：

您只是在比較 item === "gross_sales"，或者您需要單獨比較它們中的每一個

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

但最好的解決方案是將這些選項放在一個陣列中，然后arrayName.includes(item), 應該給出預期的結果。

uj5u.com熱心網友回復：

問題是您不能像以前那樣對 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_salesthruty 并且它永遠不會去到其余的值。這就是為什么你只匹配'gross_sales'

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

// logs: 'gross_sales

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324811.html

標籤：javascript 数组反应映射

上一篇：PHP中多維陣列的輸出

下一篇：從URL中的鍵獲取陣列