函数返回数据以过滤和映射显示错误 React.js TypeError：无法读取未定义的属性“val”

Question

I'm try to collect some collection of data from Firebase. Filter map to fronted using React Js. In below code Firebase.database().ref('public/post/India/Tamil Nadu/SALEM/').on('value', this.getData, this.errordata) Using this function i get data on this.getdata()

I got data that show in console output but browser show error as TypeError: Cannot read property 'val' of undefined. Please any one solve this

Please Note

• I successfully retrieve my data From firebase That show in console output.
• The issue while getdata function returning the data to filter and map that show error

-> Home.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;

Console output :

 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"
  

My browser show error as

  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

I think you are not passing snapshot to the function that is why it is showing undefined. Try this out:

   ...
    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(...)

Please refer: https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events