javascript - React/Material-UI：如何从一个 JSON 对象映射多个表，其中包含多个数据数组？
问题描述
我试图找出创建一个动态表组件的最佳方法，该组件根据字典对象中的数组数量创建单独的表（基本上迭代每个数组并重新生成一个表）。
对于我的具体情况，我有 4 个来自 Axios 调用的表数据数组，这意味着需要生成四个单独的表。以下是数据对象的示例：
我试图不对表格进行硬编码，这是我到目前为止所拥有的。
请注意，用作映射的代码只是作为伪代码来帮助我计划这一点。
export default function DataTables()
{
const classes = useStyles();
const { slug } = useParams();
const [data, setData] = useState({ finData: [] });
useEffect(() =>
{
const fetchData = async () =>
{
const result = await axiosInstance.get('bucket/fin-data/' + slug);
setData(result.data);
};
fetchData();
}, []);
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
{data.map((table) => (
<TableHead>
{data.map((header) => (
<TableRow>
<TableCell>{header}</TableCell>
</TableRow>
))}
</TableHead>
<TableBody>
{data.map((row) => (
<TableRow >
<TableCell>{row}</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%"
}
]
]
编辑编辑：使用 Promise 的新 axios 调用
const [data, setData] = useState([]);
useEffect(() =>
{
const fetchData = async () =>
{
const result = Promise(axiosInstance.get('bucket/fin-data/' + slug)
.then(setData(result.data)));
};
fetchData();
}, []);
解决方案
我建议你这样做
const [data, setData] = useState([])
const getData = () => {
axiosInstance
.get('bucket/fin-data/' + slug)
.then(result => setData(result.data))
}
useEffect(() => {
getData()
}, [])
推荐阅读
- docker - 将唯一 id 传递给 Docker Compose 服务实例
- angular - Spring Boot嵌入式Tomcat能否访问定义的spring.tomcat.basedir的webapps文件夹
- python - 来自 cron 的脚本在错误时发送 >50 封邮件，在成功时发送 1 封邮件
- c# - Olook Interop：检查帐户是否为默认帐户
- azure - 将 Azure Web App Files 的文件夹挂载到 VM 中？
- mysql - 如何在 mysql 中使用 update 和 select...for update
- visual-studio-code - VSCode 在 mac 和 windows 中有不同的视图吗？
- javascript - 如何使用 Spring Boot 控制器将 javascript 变量保存到我的 sql 中？
- mbedtls - 解析 ECC 私钥缓冲区
- java - 如何从 webview 中检索文本