呈现嵌套的JSON数据集合
呈现嵌套的JSON数据集合
提问于 2021-01-06 03:18:34
我使用了一个从JSON接收数据并将其显示为列表的模板文件
JSON -
"items":[
{
"name":"a",
},
{
"name":"b",
},
{
"name":"c",
}
]JS文件
var items= this.props.data.items.map(function(items){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
//where it later gets rendered like so:
<div className="four columns main-col">
<div className="bars">
<ul className="items">
{items}
</ul>
</div>
</div>但是，我想修改数据，使其更加分类，并将有嵌套的对象
示例：
"categorizedItems":[
{
"type":"a",
"items":[
{
"name":"apple"
},
{
"name":"banana"
}
]
},
{
"type":"b",
"items":[
{
"name":"car"
}
]
}
]所以我想，因为它是一个嵌套的JSON对象，所以我需要映射两次，所以我尝试了以下方法：
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})
//and i render it the same way
<div className="four columns main-col">
<div className="categories">
{categories}
</div>
</div>然而，这会给我错误提示：“错误:对象作为React子级无效(找到:具有键{name}的对象)。如果您打算呈现一个子级集合，请改用数组。”我不明白我正在做的事情(嵌套映射)与原始代码(单个映射)有什么不同。
回答 1
Stack Overflow用户
发布于 2021-01-06 03:37:12
我解决了你代码中的错误，试试这个
import React from "react";
import "./styles.css";
const data = [
{
type: "a",
items: [
{
name: "apple"
},
{
name: "banana"
}
]
},
{
type: "b",
items: [
{
name: "car"
}
]
}
];
const categories = data.map((category) => {
const items = category.items.map(function (item) {
return (
<li key={item.name}>
<span className={item.name}></span>
<em>{item.name}</em>
</li>
);
});
return <ul key={category.type}>{items}</ul>;
});
export default function App() {
return (
<div className="four columns main-col">
<div className="categories">{categories}</div>
</div>
);
}这是沙盒链接- https://codesandbox.io/s/nervous-noether-80ye9?file=/src/App.js:0-714
现有代码中的问题。而不是
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={items.name}><span className={items.name}></span><em>{items.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})试一试
var categories= this.props.data.categorizedItems.map(function(category){
var items= category.items.map(function(item){
return <li key={item.name}><span className={item.name}></span><em>{item.name}</em></li>
})
return <ul key={category.type}>{items}</ul>
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65585209
复制相关文章
相似问题
腾讯云开发者
