无法读取未定义的属性映射

时间:2019-07-26 21:59:34

标签: reactjs react-native redux

我想使用地图功能在我的应用程序上显示数据 但它什么也没显示。 我正在使用Redux和MySQL数据库

我尝试将(属性)的默认状态设置为无效

这是组件代码

import React, {Component} from 'react';
import {ActivityIndicator,ScrollView,ImageBackground,TouchableOpacity,StyleSheet, Text, View,Button,TextInput,Image} from 'react-native';
import {connect} from 'react-redux';
import {gethouse} from '../../store/actions/house_actions';
import {bindActionCreators} from 'redux';
class Property extends Component {
    static navigationOptions ={
        header:null
    }
    componentDidMount(){
         this.props.dispatch(gethouse());
    }
    postsProperty =(house) =>(
        house.property ?
            house.property.map((item,i)=>(
                <TouchableOpacity key ={i}>
                    <Text>hello</Text>
                </TouchableOpacity>
        ))
        :<ActivityIndicator/>
    )
    render() {
        return (
            <ScrollView style= {{backgroundColor:'#F0F0F0'}}>
                {this.postsProperty(this.props.House)}
            </ScrollView>

      );
    }
}
function mapstatetoprops(state){
    console.log(state);
    return{
        House:state.House
    }
}

export default connect(mapstatetoprops)(Property);

这是动作代码

import HOUSE_P from '../types';
import axios from 'axios';

export function gethouse(){
    const request =axios({
        method:'GET',
        url:'http://192.168.1.4:3000/property'
    }).then(response =>{
        console.log(response.data);
        const property= response.data;
        return property;
    }).catch(e =>{
        console.log(e);
        return false;  
    })
    return{
        type: 'housing',
        payload:request
    }
}

在调试器中我可以正确获取数据 这是我的数据 https://i.ibb.co/SdPDsvX/Capture.png

如果我评论house.property吗?我收到此错误消息 typeError无法读取未定义的属性映射 顺便说一句,我在显示文本“ hello”只是为了知道它是否正在工作,它应该显示hello 3倍作为我数据库中的行数

1 个答案:

答案 0 :(得分:1)

您的gethouse函数正在使用 axios 进行异步调用,因此您将返回待处理的Promise作为有效载荷。

我不知道您的减速器是什么样子,所以这是最好的猜测。

您可以尝试使gethouse成为异步函数:

export async function gethouse(){
  try {
    const response = await axios({
      method:'GET',
      url:'http://192.168.1.4:3000/property'
    })

    console.log(response.data);
    const property = response.data;

    return {
      type: 'housing',
      payload: property
    }
  }
  catch(e) {
    console.log(e);
    return false;  
  }
}

...,然后在您的组件中,在gethouse解析时分派操作:

componentDidMount(){
  gethouse()
    .then(action => this.props.dispatch(action));
}

我希望这会有所帮助。