React函数组件调用FastAPI接口后如何展示返回对象为表格？

应用功能需求 #

我正在构建一个Web应用，该应用接收用户输入后执行计算，输出指定建筑可生产的各类物品的每小时利润。

示例输入 #

Physics laboratory 2 1.0 0.01

示例输出 #

{
    Energy research: 821.6746356364301, 
    Mining research: 742.7240922619478, 
    Electronics research: 864.3855853308221
}

我需要将上述数据展示为一个表格，表格列名为Item和Profit Per Hour。

遇到的问题与疑问 #

我研究过React函数式表格的实现示例，以及其他使用.map渲染表格的方案，但在尝试将示例适配到我的useState输出数据时，出现了「列表中的每个子元素必须拥有一个Key」的错误。

我已经阅读过React官方文档中关于列表与Keys的内容，考虑创建新的虚拟环境（venv）并使用create-react-app来练习.map和keys的使用，想问这是不是实现我所需表格展示的正确方向？

另外，我怀疑async异步操作可能是导致这个key错误的原因，因为表格可能在Promise完成前就尝试渲染。

组件代码片段 #

以下是我的函数组件代码片段，该组件从文本框获取输入并调用API接口返回数据对象：

const populateTable = async () => {
    try{
        let encodedName = encodeURI(buildingName)
        let targetURI = `http://127.0.0.1:8000/api/calculateProfitPerHourOf{}?buildingName=${encodedName}&buildingLevel=${buildingLevel}&productionModifierPercentage=${productionModifierPercentage}&administrationCostPercentage=${adminCostPercentage}`
        let res = await axios.get(targetURI);
        let arr = res.data
        setResult(arr);
        console.log(arr)
    } catch(e) {
        console.log(e)
    }
}

const HandleClick = () => {
    populateTable();
}

内容的提问来源于stack exchange，提问作者Logan Pederson