【发布时间】：2021-02-08 17:10:10
【问题描述】：
我有这个组件可以映射和创建多个表，问题是它都包含在一个<TableContainer> 中。退货的映射和布局无法让我灵活地单独定制每个表格，原因有两个：
- 创建的每个表都包含在
<TableContainer>中 - 我无法在单个级别访问每个表格组件。
理想情况下，我有一个返回映射器，它将每个表映射到它自己的标识表，每个表都有它自己的<TableContainer>，
我的 JSON 对象数据有 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 对象中的每个数组动态映射一个表，同时牢记在个人级别自定义每个表的可能性？
【问题讨论】：
-
你为什么不能把它映射到 4 个独立的 TableContainers 上呢？
-
我已经尝试过这样做，但是我收到了 React Strict 模式错误，因为我的返回函数结构错误。而且我无法通过我的尝试自定义每个单独的表。
标签： javascript reactjs material-ui