函數返回數據以過濾和映射顯示錯誤 React.js TypeError：無法讀取未定義的屬性“val”

Question

我正在嘗試從 Firebase 收集一些數據集合。 使用 React Js 過濾映射到前端。 在下面的代碼Firebase.database（）。REF（ '公共/后/印度/泰米爾納德邦/塞勒姆/'）。在（ '值'，this.getData，this.errordata）使用此功能我得到this.getdata數據()

我得到的數據顯示在控制台輸出中，但瀏覽器將錯誤顯示為TypeError：無法讀取未定義的屬性“val”。 請任何人解決這個問題

請注意

• 我成功地從控制台輸出中顯示的 firebase 檢索了我的數據。
• getdata 函數返回數據以過濾和映射顯示錯誤的問題

-> 主頁.js

 import React, { Component } from 'react'; import Firebase from './container/Firebase'; class home extends Component { constructor(props) { super(props); this.state = { nam: "a", arr:"", users: ['abc', "pdsa", "eccs", "koi"] } } componentWillMount() { Firebase.database().ref('public/post/India/Tamil Nadu/SALEM/').on('value', this.getData, this.errordata) } getData(data) { console.log("sdata"); //console.log(data.val()); var post = data.val(); console.log(post); var keyy = Object.keys(post); console.log(keyy); var lisarr =[''] ; for (var i = 0; i < keyy.length; i++) { var k = keyy[i]; lisarr[i]={ key :k , Organisation : post[k].Organisation, Role :post[k].Role } } console.log("getData lisarr"); console.log(lisarr); return lisarr; } errordata(err) { console.log(err); } handleChange = event => { this.setState({ nam: event.target.value }); }; render() { return ( <div> <h1>Homa</h1> {this.getData().filter(person => this.state.num === null ||person.Role.includes("h")).map(filteredPerson => ( <li> {filteredPerson.Role} </li> ))} </div> ) } } export default home;

控制台輸出：

 getData post                                                                     home.js:24
 {-MFJqzPGXeLPk6pQzY18: {…}, -MFKZLLtWkH2arNnmNE_: {…}, -MFKZg38ybFO9hC0UqLf: {…}}- 
       -MFJqzPGXeLPk6pQzY18: {City: "SALEM", Country: "India", Description: "Proven experienc...
       -MFKZLLtWkH2arNnmNE_: {City: "SALEM", Country: "India", Description: "attend customers↵...
       -MFKZg38ybFO9hC0UqLf: {City: "SALEM", Country: "India", Description: "attend customers↵...

                                                                                     home.js:26 
 getData keyy                                                                        home.js:27 
 ["-MFJqzPGXeLPk6pQzY18", "-MFKZLLtWkH2arNnmNE_", "-MFKZg38ybFO9hC0UqLf"]
           0: "-MFJqzPGXeLPk6pQzY18"
           1: "-MFKZLLtWkH2arNnmNE_"
           2: "-MFKZg38ybFO9hC0UqLf"

  getData  lisarr                                                                  home.js:45 

 (3) [{…}, {…}, {…}]
  0:
      Organisation: " abc CAR COMPANY PVT LTD "
      Role: "Sales Executive"
      key: "-MFJqzPGXeLPk6pQzY18"
  1:
      Organisation: "abc conseltency"
      Role: "Surgical Avenue"
      key: "-MFKZLLtWkH2arNnmNE_"

  2:
       Organisation: "Sociall.in "
       Role: "Excutive"
       key: "-MFKZg38ybFO9hC0UqLf"
  

我的瀏覽器顯示錯誤為

  TypeError: Cannot read property 'val' of undefined
  19 | console.log("sdata");
  20 | //console.log(data.val());
  21 | 
> 22 | var post = data.val();
     | ^  23 | console.log(post);
  24 | var keyy = Object.keys(post);
  25 | console.log(keyy);

Answer 1

我認為您沒有將快照傳遞給函數，這就是它顯示未定義的原因。 試試這個：

   ...
    this.state = {
    fetchedData: null,
            nam: "a",
            ...
        }
   ...
    componentDidMount() {

       Firebase.database().ref('public/post/India/Tamil Nadu/SALEM/')
        .on('value', (snapshot) => { 
            if(snapshot.val() != null){
             this.setState({fetchedData: snapshot.val());
            }else {
             this.errordata();
        }});
       
    }
...

{this.getData(this.state.fetchedData).filter(person => this.state.num === null ||person.Role.includes("h")).map(...)

請參考： https : //firebase.google.com/docs/database/web/read-and-write#listen_for_value_events