React 组件在来自 JSON 对象的选项卡中呈现动态内容答案

【问题标题】：React component render dynamic content in tabs from a JSON objectReact 组件在来自 JSON 对象的选项卡中呈现动态内容
【发布时间】：2020-05-06 07:59:37
【问题描述】：

在我的 React 组件中，我无法从 JSON 对象呈现动态选项卡。我能够检索 JSON 数据键和值数组，但无法在 UI 中呈现它。

我正在使用 PrimeReact UI 组件。 https://www.primefaces.org/primereact/#/tabview

组件

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

JSON 数据：-

"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"}]

对于此代码，不会呈现任何选项卡

【问题讨论】：

您面临什么具体问题？就目前而言，您的代码循环通过splitGroupedStartingMaterials 对象的“1”和“2”键。你想渲染什么？出现了什么具体问题？
我认为你不能在 foreach 中返回。尝试改用地图。
@evolutionxbox console.log 行打印对象的键和值
尝试控制台记录Object.keys().forEach( ...的返回它可能是未定义的。 forEach has an undefined return value
谢谢各位，React 似乎只是 map 而不是 forEach。现在它适用于地图。

标签： javascript reactjs primereact

【解决方案1】：

你可以试试：

export default class Report extends Component {


    render() {                          

        const { splitGroupedStartingMaterials } = this.state

        return (
            <div>
                <TabView>
                    {
                        Object.keys(splitGroupedStartingMaterials).map(k => (
                            <TabPanel header={'Family'}>
                                simple content here for testing
                            </TabPanel>
                        ))
                    } 
                </TabView>                              
            </div>);
        }
}

【讨论】：

谢谢，但这甚至不会编译并给出编译错误。无法编译 ./src/components/inorganic/custom-quote/InOrganicCreateCustomQuote.jsx 第 705 行：预期分配或函数调用，而是看到一个表达式 no-unused-expressions
请立即重试。我在地图内的箭头函数之后忘记了（）。
Map 与 forEach 基本相同，只是可以返回数据。需要返回数据来组装的子项。