Javascript React组件在JSON对象的选项卡中呈现动态内容
在React组件中,我无法从JSON对象呈现动态选项卡。 我能够检索JSON数据键和值数组,但无法在UI中呈现它 我正在使用PrimeReact UI组件。 组成部分Javascript React组件在JSON对象的选项卡中呈现动态内容,javascript,reactjs,primereact,Javascript,Reactjs,Primereact,在React组件中,我无法从JSON对象呈现动态选项卡。 我能够检索JSON数据键和值数组,但无法在UI中呈现它 我正在使用PrimeReact UI组件。 组成部分 export default class Report extends Component { render() { const { splitGroupedStartingMaterials } = this.state ret
export default class Report extends Component {
render() {
const { splitGroupedStartingMaterials } = this.state
return (
<div>
<TabView>
{
Object.keys(splitGroupedStartingMaterials).forEach(k => {
console.log('k : ' + k, JSON.stringify(splitGroupedStartingMaterials[k]));
return (<TabPanel header={'Family'}>
simple content here for testing
</TabPanel>);
})
}
</TabView>
</div>);
}
}
更新:-
"splitGroupedStartingMaterials": {
"1": [
{
"id": 45598,
"symbol": "Mn",
"description": "Mn(NO3)2 (fr mn flake)_[10377-66-9]",
"priority": 1,
"matrices": "HNO3",
"family": "F2.0",
"splitGroup": "1"
},
{
"id": 45636,
"symbol": "Ti",
"description": "(NH4)2TiF6 (as Ti)_[16962-40-6]",
"priority": 2,
"matrices": "F- : HNO3",
"family": "F1.1",
"splitGroup": "1"
}
],
"2": [
{
"id": 45572,
"symbol": "Cr",
"description": "CrCl3 (fr Cr shot)_[10025-73-7]",
"priority": 2,
"matrices": "HCl",
"family": "F3.1",
"splitGroup": "1_2"
}
]
}
控制台日志:-
"splitGroupedStartingMaterials": {
"1": [
{
"id": 45598,
"symbol": "Mn",
"description": "Mn(NO3)2 (fr mn flake)_[10377-66-9]",
"priority": 1,
"matrices": "HNO3",
"family": "F2.0",
"splitGroup": "1"
},
{
"id": 45636,
"symbol": "Ti",
"description": "(NH4)2TiF6 (as Ti)_[16962-40-6]",
"priority": 2,
"matrices": "F- : HNO3",
"family": "F1.1",
"splitGroup": "1"
}
],
"2": [
{
"id": 45572,
"symbol": "Cr",
"description": "CrCl3 (fr Cr shot)_[10025-73-7]",
"priority": 2,
"matrices": "HCl",
"family": "F3.1",
"splitGroup": "1_2"
}
]
}
10:46:28.769 InOrganicCreateCustomQuote.jsx:704 k : 1 [{"id":45621,"symbol":"Sc","description":"Sc2O3 (as Sc)_[256652-08-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"},{"id":45636,"symbol":"Ti","description":"(NH4)2TiF6 (as Ti)_[16962-40-6]","priority":2,"matrices":"F- : HNO3","family":"F1.1","splitGroup":"1"},{"id":45640,"symbol":"V","description":"V2O5 (as V)_[1314-62-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"}]
10:46:28.770 InOrganicCreateCustomQuote.jsx:704 k : 2 [{"id":45646,"symbol":"Zr","description":"ZrCl2O (as Zr)_[7699-43-6]","priority":1,"matrices":"HCl","family":"F3.1","splitGroup":"1_2"}]
对于此代码,不呈现任何选项卡
你能试试吗
导出默认类报表扩展组件{
呈现{
const{splitGroupedStartingMaterials}=this.state
回来
{
Object.keyssplitGroupedStartingMaterials.mapk=>
这里有简单的测试内容
}
;
}
}你面临的具体问题是什么?此时,您的代码在splitGroupedStartingMaterials对象的1键和2键之间循环。你想做什么?发生了什么具体问题?我认为你不能马上回来。请尝试改用映射。@evolutionxbox console.log行打印objectsTry控制台的键和值,记录Object.keys.forEach的返回。。。它可能是未定义的。谢谢,伙计们,看起来像是唯一的地图而不是forEach。现在它可以和map一起工作了。谢谢,但它甚至不会编译,并给出了编译错误。未能编译。/src/components/anical/custom quote/InOrganicCreateCustomQuote.jsx第705行:应为赋值或函数调用,但看到的是表达式没有未使用的表达式请立即重试。我忘记了在map.map中的箭头函数之后。map本质上与forEach相同,只是可以返回数据。需要返回数据来组合子对象。