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

Question

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

{
  "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..

基本上，创建一个使用 Object Key 的表作为左列，Object Value为了权利。

到目前为止，这是我尝试过的方法，但在使用 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>
  });

))
)

然后我将在我的文件中这样调用它:

<SpecSheet CharacterData={data} />

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

---

我的问题:

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

Warning: Each child in a list should have a unique "key" prop. ，但我正在为我的 tr 提供索引元素。

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

Answer 1

如果你尝试这样的事情会怎样:

const data = {
  "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": [],
};

function SpecSheet(props) {
  const character = props.CharacterData;
  const characterInfo = 
    Object.entries(character)
      .filter(([key,val]) => !Array.isArray(val));

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

ReactDOM.render(<SpecSheet CharacterData={data} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

这将过滤掉任何数组值，并使用字符(希望如此)的唯一 id以属性作为每个 <tr/<}> 的键