如何在反应表中显示从 API 获取的数据？

Question

我从定期更新的 API 中获取此示例数据。

[
    {
        "name": "s1",
        "data": [
            {
                "time": "03:15:00",
                "score": "23" 
            },
            {
                "time": "03:14:00",
                "score": "43" 
            },
            {
                "time": "03:13:00",
                "score": "12" 
            },

        ]
    },
    {
        "name": "s2",
        "data": [
            {
                "time": "03:14:00",
                "score": "54" 
            },
            {
                "time": "03:13:00",
                "score": "34" 
            },
            {
                "time": "03:10:00",
                "score": "23" 
            },

        ]
    },
    {
        "name": "s3",
        "data": []
    },
    {
        "name": "s4",
        "data": [
            {
                "time": "03:16:00",
                "score": "ERR" 
            },
            {
                "time": "03:10:00",
                "score": "65" 
            },
            {
                "time": "03:09:00",
                "score": "54" 
            },

        ]
    }
]

此数据使用此代码每分钟更新一次：

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

const getData = async () => {
    try {
        const myData = await axios.get('http://127.0.0.1:8000/my-drf-api')
        console.log("myData: ", myData.data);
        setData(myData.data);
    } catch (err) {
        console.error(err.message);
    }
};

useEffect(() => {

    getData()
    const interval = setInterval (() => {
        getData()
    }, 60000)

    return () => {
        clearInterval(interval)
    }
}, [])

现在我需要以表格格式显示它，以便第一列显示每个名称 (s1-s4) 的聚合时间，从最新到最早排序，该列的 rest 显示分数，每列的 header 作为名字。 因此，该表每分钟更新一次，在最顶行插入新数据。

它应该像这样显示：

我研究了几个 React 表库，引起我注意的是 react-table。 但是，我不知道如何设置时间列，以及作为列的 rest 的访问器的分数。 任何帮助将非常感激。

Answer 1

您可以使用材料 UI 表将数据显示到表中，将 map 应用于数据并根据您的要求将数据拆分为相应的行和列

作为参考，请参考此链接https://mui.com/components/tables/