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/<}>的键

Answer 2

在最低的代码块中，您有一个不属于的额外的闭合花括号。

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

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>
    )

有关Object.keys的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

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

2 个答案: