在 React 中渲染复杂的 JSON/Javascript 对象

问题描述

我正在尝试在 React 中呈现一个 JSON 对象（可能是 javascript 对象，老实说不确定）。问题是我的数据库中的数据为每个节点提供了一个随机名称，例如“-MXD0MSwDX8FN6qUw9H0”。我认为这没什么大不了的，但问题是我试图访问该节点下的数据。如下图所示，我想将“一”“二”“三”和“四”的条目呈现为数据表的一部分。

[
  {
    "name": "State","value": [
      {
        "-MXD0MSwDX8FN6qUw9H0": {
          "four": "1","one": "ABCDEF","three": "1","two": "ARCA"
        },"-MXD0MZbyi3zAodme7mL": {
          "four": "2","three": "2","-MXD2m0143mUw6BSb5Jg": {
          "four": "1","-MXD2m5wE6OB8DTH6N3c": {
          "four": "2","two": "ARCA"
        }
      }
    ],"subHooks": []
  },{
    "name": "Effect","value": "ƒ () {}","subHooks": []
  }
]

到目前为止，我已尝试将其转换为具有 [].concat(tabledData) 和 Array.of(tabledData) 的数组，但它似乎不起作用，因此我目前正在尝试使其与javascript 对象函数。这是我目前所拥有的示例：

{Object.keys(Data).map( (key)=>{
                return (
                    <div className="dataLine">
                            <div>{Data[key].one}</div>
                            <div>{Data[key].two}</div>
                            <div>{Data[key].three}</div>
                            <div>{Data[key].four}</div>
                            <div>{Data[key].five}</div>
                    </div>
                )
            })}

我相信我的错误是 Data（这是我的状态值）在 Data[key].one 没有条目，因为子节点还不是一个，它类似于“-MXD0MSwDX8FN6qUw9H0”。由于我无法预测此随机字符串，因此我不确定如何在不知道名称的情况下访问此 Object 的子级。

解决方法

非常感谢 Dave Newton 让我意识到我确实做对了大部分。我不确定我到底对什么感到困惑，据我所知，我认为我的解决方案应该有效。

非常感谢获得它的 Frank Van Puffelen。我使用 forEach 方法从 firebase 获取数据并创建一个神奇地工作的对象！我希望我理解它。如果有人有任何解释，那就太好了。我的整个代码如下。我的解决方案超级笨拙，但稍后我会在知道自己在做什么时进行重构。

import React,{ useState,useEffect } from "react"
import { database } from "../firebase"

export default function Datatable(props) {

    const [Data,setData] = useState([])


      useEffect(()=>{
        var recTradeDatabase = database.ref(props.dataName)
        recTradeDatabase.on('value',(snapshot) => {
          //const tabledData = snapshot.val()
          setData([]);
          snapshot.forEach(dataPiece =>{
            setData(currentData=>[dataPiece.val(),...currentData])
          })
          setData(currentData=>[].concat(currentData.slice(0,props.TableCutOff)))
        })
      },[props.dataName,props.TableCutOff])

    const {
        title,columnNames,ID
      } = props

     
      /* Old way of setting Data
      function setDataAsync(newData,cutLength){
        setData(arrayOfData => [].concat([newData,...arrayOfData]))
        setData(truncated => [].concat(truncated.slice(0,cutLength)))
      }
      */
    
    return (
        <div id={( ID || "")} className="datacontainer">
            <div className="title-line">
                <div>{title}</div>
            </div>
            <div className="column-titles">
            {columnNames.map(dataEntry => {
                return (
                    <div className="title">
                        <div>{dataEntry}</div>
                    </div>
                )
            })}
            </div>
            <div id="data">
            
            {Object.keys(Data).map( (key)=>{
                console.log(Data)
                return (
                    <div className="dataLine">
                            <div>{Data[key].one}</div>
                            <div>{Data[key].two}</div>
                            <div>{Data[key].three}</div>
                            <div>{Data[key].four}</div>
                            <div>{Data[key].five}</div>
                    </div>
                )
            })}
            </div>
        </div>
    )
}