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

如何解决函数将数据返回到过滤器并映射以显示错误React.js TypeError：无法读取未定义的属性“ val”

我正在尝试从Firebase收集一些数据。使用React Js将地图过滤到前端。 在以下代码中 Firebase.database（）。ref（'public / post / India / Tamil Nadu / SALEM /'）。on（'value'，this.getData，this.errordata）使用此功能我在 this.getdata（）

上获取数据

我有数据显示在控制台输出中，但浏览器显示错误为 TypeError：无法读取未定义的属性“ val”。 请任何人解决这个问题

请注意

• 我成功从firebase检索了数据，该数据显示在控制台输出中。
• getdata函数将数据返回到显示错误的过滤器和映射时的问题

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

控制台输出：

 getData post                                                                     home.js:24
 {-MFJqzPGXeLPk6pQzY18: {…},-MFKZLLtWkH2arNnmNE_: {…},-MFKZg38ybFO9hC0UqLf: {…}}- 
       -MFJqzPGXeLPk6pQzY18: {City: "SALEM",Country: "India",Description: "Proven experienc...
       -MFKZLLtWkH2arNnmNE_: {City: "SALEM",Description: "attend customers↵...
       -MFKZg38ybFO9hC0UqLf: {City: "SALEM",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);

解决方法

我认为您没有将快照传递给该函数，这就是为什么它显示未定义的原因。 试试看：

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