Question

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

问题：我无法显示嵌套项目，只有“ id”项目显示在react应用程序上。我试图在我的应用中显示“ 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>
    );
}

Answer 1

至少，您的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>
    );
  };

Answer 2

您在这里所做的就是将整个对象再次添加到对象key的单词中：

newState.push({
   id: word,
   word: words[word]
})

这意味着id正在获取index，而word正在获取整个对象。我想这就是您想要的，但是如果您想要保留这样的内容，那么您正在寻找的word就在word.word.word中。例如：

  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.word.id} - {word.word.word['Extra_data']['Average_Sum']}</h3>
              </div>
              )
          })}
        </div>
    );
  }

以下是完整的代码，如果您想在从firebase收到响应时玩转并更改存储该对象的方式：

解决此问题的另一种方法是将将对象添加到newState数组的方式更改为：

newState.push({
     id: words[word].id,
     word: words[word].word
});

这样做，您以后可以在render中访问该数组的元素，例如：

 <h3>
   {word.id} - {word.word["Extra_data"]["Average_Sum"]}
 </h3>

这是第二种方法的示例：

反应显示嵌套数组项

2 个答案: