Javascript 如何为可重用的React表组件分离JSON对象

我有一个对象，如下所示：

{
  "id": 1,
  "name": "Dan",
  "icon": "",
  "stat_1": 1.2,
  "stat_2": 2.5,
  "stat_3": 4.1,
  "stat_4": 1,
  "stat_5": 12,
  "critical_hit": true,
  "g_combo": [],
  "a_combo": [],
  "t_combo": [],
}

我的目标是能够在这个对象上循环（排除数组），并创建一个如下所示的表：

+---------------------------+
|  Character Stats for Dan  |
+---------------------------+
|   ID    | 1               |
+---------+-----------------+
|   NAME  | Dan             |
+---------+-----------------+
|   ICON  | {icon img}      |
+---------+-----------------+
...etc..

const tableRows = Object.keys(danObj)
    // Don't run this code on your arrays
    .filter(obj => !Array.isArray(danObj[obj]))
    .map(stat => (
        <tr key={stat}>
            <td>{stat}</td>
            <td>{danObj[stat]}</td>
        </tr>
    )

基本上，创建一个表，将

对象键

用作左列，将

对象值

用作右列

到目前为止，这是我尝试过的，但在React中不断遇到错误：

export default function SpecSheet(props) {
  const character = props.CharacterData;
  const characterInfo = Object.entries(character);

return (
  characterInfo.map((item, index)=> (
    <tr key={index}>
      <td>{item[0]}</td>
      <td>{item[1]}</td>
    </tr>
  });

))
)

导出默认功能规格表（道具）{
常量字符=props.CharacterData；
const characterInfo=Object.entries（字符）；
返回(
characterInfo.map（（项目，索引）=>(
{item[0]}
{项目[1]}
});
))
)

然后我会在我的文件中这样调用它：

+---------------------------+
|  Character Stats for Dan  |
+---------------------------+
|   ID    | 1               |
+---------+-----------------+
|   NAME  | Dan             |
+---------+-----------------+
|   ICON  | {icon img}      |
+---------+-----------------+
...etc..

const tableRows = Object.keys(danObj)
    // Don't run this code on your arrays
    .filter(obj => !Array.isArray(danObj[obj]))
    .map(stat => (
        <tr key={stat}>
            <td>{stat}</td>
            <td>{danObj[stat]}</td>
        </tr>
    )

{data}是对我的JSON文件的引用

---

我的问题是：

这似乎正好生成了我在控制台中寻找的内容，除了它没有过滤掉数组，而且表似乎也没有在页面上生成。唯一的错误是我；我得到的是

警告：列表中的每个子元素都应该有一个唯一的“key”属性。

，但我正在为我的

tr

元素提供索引

---

有什么办法可以解决这个问题吗？

如果你尝试这样的方法会怎么样：

+---------------------------+
|  Character Stats for Dan  |
+---------------------------+
|   ID    | 1               |
+---------+-----------------+
|   NAME  | Dan             |
+---------+-----------------+
|   ICON  | {icon img}      |
+---------+-----------------+
...etc..

const tableRows = Object.keys(danObj)
    // Don't run this code on your arrays
    .filter(obj => !Array.isArray(danObj[obj]))
    .map(stat => (
        <tr key={stat}>
            <td>{stat}</td>
            <td>{danObj[stat]}</td>
        </tr>
    )

const数据={
“id”：1，
“姓名”：“丹”，
“图标”：“，
“统计1”：1.2，
“统计2”：2.5，
“统计3”：4.1，
“统计4”：1，
“统计5”：12，
“致命一击”：没错，
“g_组合”：[]，
“a_组合”：[]，
“t_组合”：[]，
};
功能规格表（道具）{
常量字符=props.CharacterData；
常量characterInfo=
Object.entries（字符）
.filter（（[key，val]）=>！Array.isArray（val））；
返回(
characterInfo.map（（项目，索引）=>(
{item[0]}
{项目[1]}
)
)
);
}
render（，document.getElementById（“根”））
在最低的代码块中，您有一个额外的不属于您的闭合大括号

尝试使用Object.keys（danObj）。这将在对象中创建一个键数组。假设我将您的对象重命名为danObj，您可以执行以下操作：

+---------------------------+
|  Character Stats for Dan  |
+---------------------------+
|   ID    | 1               |
+---------+-----------------+
|   NAME  | Dan             |
+---------+-----------------+
|   ICON  | {icon img}      |
+---------+-----------------+
...etc..

const tableRows = Object.keys(danObj)
    // Don't run this code on your arrays
    .filter(obj => !Array.isArray(danObj[obj]))
    .map(stat => (
        <tr key={stat}>
            <td>{stat}</td>
            <td>{danObj[stat]}</td>
        </tr>
    )

const tableRows=Object.keys（danObj）
//不要在阵列上运行此代码
.filter（obj=>！Array.isArray（danObj[obj]））
.map（stat=>(
{stat}
{danObj[stat]}
)

Object.keys的信息：
这似乎生成了我在控制台中寻找的内容，但仍然运行在表中未生成：/能否共享更多负责显示表其余部分的代码？这只是该函数，然后导入到页面并称为
。我已使用一个工作列表更新了我的答案代码片段和输出与预期一致。代码中的其他内容可能会导致此问题。啊，我已经完成了编辑，非常感谢您的帮助！