堆棧內存溢出
  簡體   English   中英

React/MaterialUI - 如何在我的 object 中將每個 JSON 數組 map 放到它自己的單獨表中？

[英]React/MaterialUI - How can I map each JSON array in my object to it's own separate table?

 原文  2021-02-08 17:10:10  7   1    javascript/ reactjs/ material-ui

問題描述

我有這個組件可以映射和創建多個表，問題是它都包含在一個<TableContainer>中。 我的回報的映射和布局沒有讓我能夠靈活地單獨定制每張桌子，原因有兩個：

  1. 創建的每個表都包含在<TableContainer>中
  2. 我無法在個人級別訪問每個表格組件。

理想情況下，我有一個返回映射器，它將每個表映射到它自己的標識表，每個表都有它自己的<TableContainer> ，

我的 JSON object 數據有 4 個數組的表數據。 意思是下面的代碼，映射出四個不同的表。


export default function DataTables()
{
    const classes = useStyles();
    const { slug } = useParams();
    const [data, setData] = useState([])

    const getData = () => {
      axiosInstance
        .get('bucket/fin-data/' + slug)
        .then(result => setData(result.data))
    }
    useEffect(() => {
      getData()
    }, [])
        

    return (
      <TableContainer component={Paper}>
        {data.map((table) => {
          return (
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                {Object.keys(table[0]).map((ceil) => (
                  <TableCell align="right">{ceil}</TableCell>
                ))}
              </TableHead>
              <TableBody>
                {table.map((row) => (
                  <TableRow>
                    {Object.keys(row).map((ceil) => (
                      <TableCell align="right">{row[ceil]}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          );
        })}
      </TableContainer>
    );
  }

以下是一些復制問題的數據：

[
   [
      {
         "symbol":"CLX",
         "industry":"Household/Personal Care",
         "week52high":"$235.28",
         "week52low":"$155.44",
         "marketcap":"$24,057,580,961.00",
         "pe_ratio":21,
         "beta":0.26,
         "dividend_yield":"  2.28%"
      },
      {
         "symbol":"COST",
         "industry":"Specialty Stores",
         "week52high":"$386.80",
         "week52low":"$270.45",
         "marketcap":"$157,324,408,684.00",
         "pe_ratio":36,
         "beta":0.61,
         "dividend_yield":"   .77%"
      },
      {
         "symbol":"HSY",
         "industry":"Food: Specialty/Candy",
         "week52high":"$158.28",
         "week52low":"$109.58",
         "marketcap":"$30,513,617,200.00",
         "pe_ratio":26,
         "beta":0.81,
         "dividend_yield":"  2.13%"
      },
      {
         "symbol":"K",
         "industry":"Food: Major Diversified",
         "week52high":"$70.27",
         "week52low":"$52.19",
         "marketcap":"$19,945,663,997.00",
         "pe_ratio":17,
         "beta":0.47,
         "dividend_yield":"  3.88%"
      },
      {
         "symbol":"KHC",
         "industry":"Food: Major Diversified",
         "week52high":"$35.21",
         "week52low":"$19.35",
         "marketcap":"$41,324,740,852.00",
         "pe_ratio":-84,
         "beta":0.95,
         "dividend_yield":"  4.65%"
      },
      {
         "symbol":"MDLZ",
         "industry":"Food: Major Diversified",
         "week52high":"$58.71",
         "week52low":"$40.99",
         "marketcap":"$80,389,448,908.00",
         "pe_ratio":26,
         "beta":0.85,
         "dividend_yield":"  2.12%"
      },
      {
         "symbol":"PEP",
         "industry":"Beverages: Non-Alcoholic",
         "week52high":"$148.30",
         "week52low":"$101.67",
         "marketcap":"$194,800,586,126.00",
         "pe_ratio":28,
         "beta":0.91,
         "dividend_yield":"  2.82%"
      },
      {
         "symbol":"PG",
         "industry":"Household/Personal Care",
         "week52high":"$143.42",
         "week52low":"$95.34",
         "marketcap":"$319,063,021,021.00",
         "pe_ratio":23,
         "beta":0.73,
         "dividend_yield":"  2.42%"
      }
   ],
   [
      {
         "symbol":"CLX",
         "enterprisevalue":"$25,978,580,961.00",
         "enterprise_value_revenue":3.64,
         "revenuepershare":56.69,
         "debt_to_equity":6.08,
         "ebitda":"$1,480,000,000.00",
         "profitmargin":"  16.14%%",
         "price_to_sales":3.37,
         "price_to_book":21.58,
         "put_call_ratio":0.76,
         "employees":"8,800",
         "revenue_per_employee":"$810,340.91"
      },
      {
         "symbol":"COST",
         "enterprisevalue":"$150,526,408,684.00",
         "enterprise_value_revenue":0.87,
         "revenuepershare":390.4,
         "debt_to_equity":4.05,
         "ebitda":"$7,484,000,000.00",
         "profitmargin":"   2.50%%",
         "price_to_sales":0.91,
         "price_to_book":10.59,
         "put_call_ratio":0.83,
         "employees":"273,000",
         "revenue_per_employee":"$680,822.83"
      },
      {
         "symbol":"HSY",
         "enterprisevalue":"$34,234,908,200.00",
         "enterprise_value_revenue":4.26,
         "revenuepershare":38.59,
         "debt_to_equity":4.48,
         "ebitda":"$2,071,538,000.00",
         "profitmargin":"  14.87%%",
         "price_to_sales":3.8,
         "price_to_book":14.77,
         "put_call_ratio":1.27,
         "employees":null,
         "revenue_per_employee":"$497,682.78"
      },
      {
         "symbol":"K",
         "enterprisevalue":"$26,899,663,997.00",
         "enterprise_value_revenue":1.99,
         "revenuepershare":39.36,
         "debt_to_equity":6.22,
         "ebitda":"$2,203,000,000.00",
         "profitmargin":"   8.80%%",
         "price_to_sales":1.47,
         "price_to_book":6.55,
         "put_call_ratio":0.84,
         "employees":null,
         "revenue_per_employee":"$397,911.76"
      },
      {
         "symbol":"KHC",
         "enterprisevalue":"$67,021,740,852.00",
         "enterprise_value_revenue":2.6,
         "revenuepershare":21.09,
         "debt_to_equity":1.99,
         "ebitda":"$6,217,500,000.00",
         "profitmargin":"  -1.92%%",
         "price_to_sales":1.6,
         "price_to_book":0.84,
         "put_call_ratio":0.55,
         "employees":"37,000",
         "revenue_per_employee":"$665,221.77"
      },
      {
         "symbol":"MDLZ",
         "enterprisevalue":"$97,744,448,908.00",
         "enterprise_value_revenue":3.73,
         "revenuepershare":18.32,
         "debt_to_equity":2.46,
         "ebitda":"$4,544,000,000.00",
         "profitmargin":"  11.99%%",
         "price_to_sales":3.07,
         "price_to_book":2.98,
         "put_call_ratio":1.37,
         "employees":"80,000",
         "revenue_per_employee":"$327,450.00"
      },
      {
         "symbol":"PEP",
         "enterprisevalue":"$229,666,586,126.00",
         "enterprise_value_revenue":3.35,
         "revenuepershare":49.61,
         "debt_to_equity":6.83,
         "ebitda":"$12,292,000,000.00",
         "profitmargin":"  10.27%%",
         "price_to_sales":2.84,
         "price_to_book":14.45,
         "put_call_ratio":0.95,
         "employees":"267,000",
         "revenue_per_employee":"$256,767.79"
      },
      {
         "symbol":"PG",
         "enterprisevalue":"$338,222,021,021.00",
         "enterprise_value_revenue":4.57,
         "revenuepershare":30.04,
         "debt_to_equity":2.49,
         "ebitda":"$20,550,000,000.00",
         "profitmargin":"  18.36%%",
         "price_to_sales":4.31,
         "price_to_book":6.75,
         "put_call_ratio":0.81,
         "employees":null,
         "revenue_per_employee":null
      }
   ],
   [
      {
         "symbol":"CLX",
         "rating_buy":" 13%",
         "rating_overweight":" 19%",
         "rating_hold":" 50%",
         "rating_underweight":" 19%",
         "rating_sell":"  0%",
         "total_recs":16,
         "rating_scale":"  2.75"
      },
      {
         "symbol":"COST",
         "rating_buy":" 24%",
         "rating_overweight":" 41%",
         "rating_hold":" 32%",
         "rating_underweight":"  0%",
         "rating_sell":"  3%",
         "total_recs":34,
         "rating_scale":"  2.18"
      },
      {
         "symbol":"HSY",
         "rating_buy":" 11%",
         "rating_overweight":" 17%",
         "rating_hold":" 72%",
         "rating_underweight":"  0%",
         "rating_sell":"  0%",
         "total_recs":18,
         "rating_scale":"  2.61"
      },
      {
         "symbol":"K",
         "rating_buy":" 15%",
         "rating_overweight":" 20%",
         "rating_hold":" 55%",
         "rating_underweight":"  5%",
         "rating_sell":"  5%",
         "total_recs":20,
         "rating_scale":"  2.65"
      },
      {
         "symbol":"KHC",
         "rating_buy":" 14%",
         "rating_overweight":" 24%",
         "rating_hold":" 52%",
         "rating_underweight":" 10%",
         "rating_sell":"  0%",
         "total_recs":21,
         "rating_scale":"  2.57"
      },
      {
         "symbol":"MDLZ",
         "rating_buy":" 25%",
         "rating_overweight":" 63%",
         "rating_hold":" 13%",
         "rating_underweight":"  0%",
         "rating_sell":"  0%",
         "total_recs":24,
         "rating_scale":"  1.88"
      },
      {
         "symbol":"PEP",
         "rating_buy":" 23%",
         "rating_overweight":" 32%",
         "rating_hold":" 41%",
         "rating_underweight":"  0%",
         "rating_sell":"  5%",
         "total_recs":22,
         "rating_scale":"  2.32"
      },
      {
         "symbol":"PG",
         "rating_buy":" 21%",
         "rating_overweight":" 33%",
         "rating_hold":" 42%",
         "rating_underweight":"  0%",
         "rating_sell":"  4%",
         "total_recs":24,
         "rating_scale":"  2.33"
      }
   ],
   [
      {
         "symbol":"CLX",
         "ytd_changepercent":"   -4.79%",
         "day5_changepercent":"   -8.69%",
         "day30_changepercent":"   -2.61%",
         "month3_changepercent":"   -9.73%",
         "month6_changepercent":"  -18.52%",
         "year1_changepercent":"   18.10%",
         "year2_changepercent":"   31.24%",
         "year5_changepercent":"   73.24%",
         "max_changepercent":"   328.77%"
      },
      {
         "symbol":"COST",
         "ytd_changepercent":"   -5.55%",
         "day5_changepercent":"     .98%",
         "day30_changepercent":"   -3.82%",
         "month3_changepercent":"   -5.20%",
         "month6_changepercent":"    7.63%",
         "year1_changepercent":"   19.21%",
         "year2_changepercent":"   75.75%",
         "year5_changepercent":"  177.91%",
         "max_changepercent":"   806.99%"
      },
      {
         "symbol":"HSY",
         "ytd_changepercent":"   -3.76%",
         "day5_changepercent":"     .80%",
         "day30_changepercent":"   -3.08%",
         "month3_changepercent":"    1.93%",
         "month6_changepercent":"    4.16%",
         "year1_changepercent":"   -2.02%",
         "year2_changepercent":"   44.34%",
         "year5_changepercent":"   88.36%",
         "max_changepercent":"   300.50%"
      },
      {
         "symbol":"K",
         "ytd_changepercent":"   -6.75%",
         "day5_changepercent":"   -1.54%",
         "day30_changepercent":"   -5.37%",
         "month3_changepercent":"   -8.93%",
         "month6_changepercent":"  -14.77%",
         "year1_changepercent":"  -13.32%",
         "year2_changepercent":"    5.65%",
         "year5_changepercent":"   -4.81%",
         "max_changepercent":"   101.49%"
      },
      {
         "symbol":"KHC",
         "ytd_changepercent":"   -2.48%",
         "day5_changepercent":"     .87%",
         "day30_changepercent":"    -.41%",
         "month3_changepercent":"    7.90%",
         "month6_changepercent":"    -.53%",
         "year1_changepercent":"   21.39%",
         "year2_changepercent":"  -21.83%",
         "year5_changepercent":"  -42.90%",
         "max_changepercent":"   -41.71%"
      },
      {
         "symbol":"MDLZ",
         "ytd_changepercent":"   -3.87%",
         "day5_changepercent":"    1.39%",
         "day30_changepercent":"   -2.87%",
         "month3_changepercent":"    1.57%",
         "month6_changepercent":"    3.04%",
         "year1_changepercent":"    -.73%",
         "year2_changepercent":"   27.61%",
         "year5_changepercent":"   65.20%",
         "max_changepercent":"    86.23%"
      },
      {
         "symbol":"PEP",
         "ytd_changepercent":"   -4.95%",
         "day5_changepercent":"    3.21%",
         "day30_changepercent":"   -1.38%",
         "month3_changepercent":"    2.83%",
         "month6_changepercent":"    4.94%",
         "year1_changepercent":"     .53%",
         "year2_changepercent":"   32.30%",
         "year5_changepercent":"   66.48%",
         "max_changepercent":"   219.64%"
      },
      {
         "symbol":"PG",
         "ytd_changepercent":"   -6.32%",
         "day5_changepercent":"    1.06%",
         "day30_changepercent":"   -7.00%",
         "month3_changepercent":"   -8.45%",
         "month6_changepercent":"   -1.77%",
         "year1_changepercent":"    4.71%",
         "year2_changepercent":"   39.83%",
         "year5_changepercent":"   84.87%",
         "max_changepercent":"   191.33%"
      }
   ]
]

重申我最初的問題，我如何動態地為我的 JSON object 中的每個數組生成一個表格 map，記住在個人級別自定義每個表格的可能性？

1 個解決方案

解決方案1
 1  2021-02-08 17:38:02

至於嚴格模式警告：React 不喜歡沒有用單個 html 元素包裝的 JSX。 為了讓它開心，只需將 JSX 包裝在<React.Fragment>中。

編輯您可以輕松地修改從特定數組的索引映射的對象。 在我的示例中，它是<Table>的className 。

return (
   <>
      {data.map((table, index) => {
        if (index !== 3) return (<TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                {Object.keys(table[0]).map((ceil) => (
                  <TableCell align="right">{ceil}</TableCell>
                ))}
              </TableHead>
              <TableBody>
                {table.map((row) => (
                  if<TableRow>
                    {Object.keys(row).map((ceil) => (
                      <TableCell align="right">{row[ceil]}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>   
        </TableContainer>);
      }) else return (
          <span>paste your modified table code here</span>
      );
   </>
);

現在，你的意思是你不能自定義每個表？ “定制”是什么意思？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將某些對象鍵分成自己的數組？ 如何將 map 數組 arrays 轉換為反應組件中的 JSX 元素，每個內部數組都有自己的 clipPath 如何為數組中的每個對象分配自己的密鑰？ 如何使用javascript在對象數組中使json對象的字段名稱具有值？ 創建我自己的 array.prototype.map 方法。 我怎樣才能訪問數組？ 如何將每個 JSON object 分開並將它們分組到 JavaScript 中的數組中？ 谷歌地圖的css覆蓋了我自己的樣式，如何防止這種情況？ React/Material-UI：我如何 map 從 JSON object 的多個表中獲取多個數據數組？ React/MaterialUI - 如何編輯我的多輸入以顯示與我的選項中的占位符不同的占位符？ 在 React 中獲取請求：如何在對象數組中映射對象的 JSON 數組？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM