React/Material-UI：我如何 map 从 JSON object 的多个表中获取多个数据数组？

Question

I'm trying to figure out the best way to create one dynamic table component that creates separate tables based on the number of arrays in a dictionary object (basically iterating through each array and re-producing a table).

For my specific case, I have 4 arrays worth of table data from one Axios call, meaning four separate tables that need to be produced. Here is an example of the data object:

I'm trying not to hard code the tables, here is what I have so far.

Note, the code used as mapping is just there as pseudocode to help me plan this out.

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

Would greatly appreciate some advice and/ or pseudocode on how I can accomplish this. I'm assuming I need to create a state/and or function that holds the amount of arrays for the mapping to iterate through?

Here is data to play with:

[
   [
      {
         "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%"
      }
   ]
]

EDIT EDIT: new axios call using Promise

    const [data, setData] = useState([]);

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

Answer 1

1. Your query returns data that includes several arrays of tables, and each array of tables does not have a header, that is, you do not get an array of tables (header + table content), but just an array of tables without a header
2. Why do you use useState({finData: []}), if you can just write useState ([]), and after executing the request, make setData (result.data).
3. I think it is better to use Promise in this case instead of await.
4. Please send the request result in text so that I can help you with the component itself

Answer 2

I suggest you do this

const [data, setData] = useState([])

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