javascript - 如何迭代地将数组从 localStorage 渲染到 react-google-chart？

Question

目前，我将一个数组存储在 中localStorage，并且我想在react-google-charts库中的折线图中显示数据 - 我将如何使用当前代码执行此操作？

这是我的代码：

组件.js

import React, { useState, useEffect } from "react";
import { Container } from "react-bootstrap";
import { useParams } from "react-router-dom";
import { Chart } from "react-google-charts";

function Component(props) {
    const [chartData, getChartData] = useState([]);
    let { key } = useParams();

    useEffect(() => {
      getLocalData();
    });

    const getLocalData = () => {
      let key = key;
      let local = localStorage.getItem(key);
      getChartData(JSON.parse(local));
      // The data type that getChartData() is set to is the array
    };

    return (
      <Container>
        <Chart
          width={"100%"}
          height={"300px"}
          chartType="LineChart"
          loader={<div>Loading Chart...</div>}
          data={[
            ["x", key],
            /* Set the values in the data equal to the index of the value and the value 
            from the array stored in chartData 
            Example: [index, value] */

          ]}
          options={{
            hAxis: {
              title: "Time",
            },
            vAxis: {
              title: "Data",
            },
          }}
          rootProps={{ "data-testid": "1" }}
        />
      </Container>
    );
}

export default Component;