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

Question

我正在尝试渲染 JSON object（可能是 javascript ZA8CFDE6331BD59EB2AC96F8911C4B666）。 问题是我数据库中的数据为每个节点提供了一个随机名称，例如“-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 一起使用功能。 这是我到目前为止的一个例子：

{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[key].one 没有条目，因为子节点还不是一个，它类似于“-MXD0MSwDX8FN6qUw9H0”。 由于我无法预测此随机字符串，因此我不确定如何在不知道名称的情况下访问此 Object 的孩子。

Answer 1

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

非常感谢获得它的 Frank Van Puffelen。 我使用 forEach 方法从 firebase 获取数据并创建了一个神奇的 Object 东西。 我希望我能理解它。 如果有人有任何解释，那就太好了。 我的整个代码在下面，我的解决方案非常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>
    )
}