时间戳

首页 > 解决方案 > React 显示嵌套数组项

javascript - React 显示嵌套数组项

问题描述

我有从 Firebase 中提取的数据，我试图在我的 react 应用程序上显示它，但是，我只能在我的应用程序上显示“id”部分，我无法显示嵌套的单词数组项。firebase 数据连接有效，因为我可以在 react 应用程序中显示 ID，并且可以在控制台中显示整个数据。

问题：我无法显示嵌套项目，只有“id”项目显示在反应应用程序上。我正在尝试在我的应用中显示“average_sum”数字。

我的数据的控制台日志输出：

[{
    "id":"1573671080",
    "word": {
        "Extra_data": {
            "Average_Sum": 23.151
        },
        "User_data": {
            "Counts": [51, 19, 35, 34, 48, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 60, 32, 36, 11, 23, 47]
        }
    }
},
{
    "id":"1573671081",
    "word": {
        "Extra_data": {
            "Average_Sum": 19.299999
        },
        "User_data": {
            "Counts": [21, 19, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 36, 11, 23, 47]
        }
    }
},
{
    "id":"1573671082",
    "word": {
        "Extra_data": {
            "Average_Sum": 34.12431
        },
        "User_data": {
            "Counts": [26, 49, 35, 34, 38, 38, 21, 21, 31, 28, 25, 23, 25, 17, 54, 46, 24, 19, 28, 27, 26, 25, 25, 11, 25, 34, 40, 32, 33, 11, 23, 47]
        }
    }
}]

我的 React 代码正确显示了控制台日志输出中的所有“id”值，这些 id 显示在从 firebase 中提取的 react 应用程序上。

import React, { Component } from "react";
import firebase from "../Firebase.js";

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        myData: [],
    };
};

componentDidMount() {
    const wordRef = firebase.database().ref('MyDatabase');
    wordRef.on('value', (snapshot) => {
            console.log(snapshot.val());
            let words = snapshot.val();
            let newState = [];
            for (let word in words) {
                newState.push({
                    id: word,
                    word: words[word]
                })
            }
        this.setState({
            words: newState
        })
    });
  };
};
render() {
    console.log('Out Put of State Data' + JSON.stringify(this.state.words))
    return (
        <div className='App'>
            {this.state.words.map((word) => {
                return (
                    <div>
                        <h3>{word.id}</h3>
                    </div>
                )
            })}
        </div>);
    }
}

export default App;

我如何尝试显示嵌套元素，但它不起作用：

render() {
    console.log('Out Put of State Data' + JSON.stringify(this.state.words))
    return (
        <div className='App'>
            {this.state.words.map((word) => {
                return (
                    <div>
                        <h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
                    </div>
                )
            })}
        </div>
    );
}

标签： javascriptreactjsfirebasefirebase-realtime-database

解决方案

至少，您的render()函数有一些语法错误。特别是这一行：

<h3>{word.id} - {word.word[Extra_Data][Average_Sum]</h3>
//                                                 ^ Didn't close your {} brackets

此外，您正在引用命名的变量Extra_Data，并且Average_Sum可能您正在尝试引用这些键。

请尝试以下任一方法：

  • word.word.Extra_Data.Average_Sum
  • word.word['Extra_Data']['Average_Sum']

最后，您的渲染函数可能如下所示：

render() {
    console.log("Out Put of State Data" + JSON.stringify(this.state.words));
    return (
      <div className="App">
        {this.state.words.map(word => {
          return (
            <div>
              <h3>
                {word.id} - {word.word["Extra_Data"]["Average_Sum"]}
              </h3>
            </div>
          );
        })}
      </div>
    );
  };

推荐阅读