我有一个对象,如下所示:
{
"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
提供索引元素。
有什么办法可以解决这个问题吗?
最佳答案
如果你尝试这样的事情会怎样:
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/<}>
的键
关于javascript - 如何为可重用的 React 表组件分离出 JSON 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58359427/