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

Question

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

[
  {
    "name": "State",
    "value": [
      {
        "-MXD0MSwDX8FN6qUw9H0": {
          "four": "1",
          "one": "ABCDEF",
          "three": "1",
          "two": "ARCA"
        },
        "-MXD0MZbyi3zAodme7mL": {
          "four": "2",
          "one": "ABCDEF",
          "three": "2",
          "two": "ARCA"
        },
        "-MXD2m0143mUw6BSb5Jg": {
          "four": "1",
          "one": "ABCDEF",
          "three": "1",
          "two": "ARCA"
        },
        "-MXD2m5wE6OB8DTH6N3c": {
          "four": "2",
          "one": "ABCDEF",
          "three": "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”。由于我无法预测这个随机字符串，所以我不确定如何在不知道名称的情况下访问此对象的子对象。

Answer 1

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

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

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