Reactjs getInputData未定义

Reactjs getInputData未定义,reactjs,react-native,react-redux,Reactjs,React Native,React Redux,我发现getInputData未定义错误,请问我做错了什么 getInputData只是获取用户的输入……我正在使用redux。我在名为handleInput的函数中定义了getInputData,还是定义得不好 从“React”导入React; 从“/style”导入样式; 从“react native”导入{Text}; 从“本机基”导入{View,Input,InputGroup}; 从“react native vector icons/Fontsome”导入图标; 从“react na

我发现
getInputData
未定义错误,请问我做错了什么

getInputData
只是获取用户的输入……我正在使用redux。我在名为handleInput的函数中定义了
getInputData
,还是定义得不好

从“React”导入React;
从“/style”导入样式;
从“react native”导入{Text};
从“本机基”导入{View,Input,InputGroup};
从“react native vector icons/Fontsome”导入图标;
从“react native elements”导入{SearchBar};
导出常量搜索框=({getInputData})=>{
常量handleInput=(键,值)=>{
getInputData({
钥匙
值:val
});
};
返回(
拿起
减少
);
};
导出默认搜索框;
这是我的mapContainer.js,其中
inputData
作为道具传递给
SearchBox

import React from 'react';
import styles from './style';
import {View} from 'native-base';
import MapView from 'react-native-maps';
import SearchBox from '../SearchBox';
import SearchResults from '../SearchResults';


export const MapContainer= ({region, getInputData}) => {

  return(
    <View style={styles.container}>
      <MapView
        provider={MapView.PROVIDER_GOOGLE}
        style={styles.map}
        region={region}
      >
      <MapView.Marker
        coordinate={region}
        pinColor="green"/>
      </MapView>
      <SearchBox getInputData={getInputData}/>
      <SearchResults/>
    </View>
  )
}

export default MapContainer
这是我的家庭密码

import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
import { Container} from 'native-base';
import { MapContainer} from '../../components/MapContainer';
import GetLocation from 'react-native-get-location'
import {Dimensions} from "react-native";

const {width,height}=Dimensions.get("window");
const ASPECT_RATIO=width/height;
const LATITUDE_DELTA=0.922;
const LONGITUDE_DELTA=ASPECT_RATIO*LATITUDE_DELTA

class Home extends React.Component{

  constructor(props){
    super(props);
    this.state={
      latitude:3.14662,
      longitude:101.6984,
      latitudeDelta:LATITUDE_DELTA,
      longitudeDelta:LONGITUDE_DELTA
    }
  }
  componentDidMount(){
    GetLocation.getCurrentPosition({
      enableHighAccuracy: true,
      timeout: 15000,
  })
  .then(location => {
      this.setState({
      latitude:location.latitude,
      longitude:location.longitude
      })
      console.log(location)
      console.log(this.state.longitude);
  })
  .catch(error => {
      const { code, message } = error;
      console.warn(code, message);
  })  }

  render(){
    const region={
      latitude:this.state.latitude,
      longitude:this.state.longitude,
      latitudeDelta:this.state.latitudeDelta,
      longitudeDelta:this.state.longitudeDelta
    }
    return(
      <Container>
          <MapContainer region={region} getInputData={this.props.getInputData} />
      </Container>
    );
  }

}

export default Home;
从“React”导入React;
从“react native”导入{View,Text};
从“./styles”导入样式;
从“本机基”导入{Container};
从“../../components/MapContainer”导入{MapContainer};
从“反应本机获取位置”导入GetLocation
从“react native”导入{Dimensions};
const{width,height}=Dimensions.get(“窗口”);
常量纵横比=宽度/高度;
常数纬度δ=0.922;
常量经度增量=纵横比*纬度增量
类Home扩展了React.Component{
建造师(道具){
超级(道具);
这个州={
纬度:3.14662,
经度:101.6984,
纬度三角洲:纬度三角洲,
经度三角洲:经度三角洲
}
}
componentDidMount(){
GetLocation.getCurrentPosition({
EnableHighAccurance:正确,
超时:15000,
})
。然后(位置=>{
这是我的国家({
纬度:位置。纬度,
经度:location.longitude
})
console.log(位置)
log(this.state.longitude);
})
.catch(错误=>{
常量{代码,消息}=错误;
控制台。警告(代码、消息);
})  }
render(){
恒定区={
纬度:这个州,纬度,
经度:this.state.longitude,
latitudeDelta:this.state.latitudeDelta,
longitudeDelta:this.state.longitudeDelta
}
返回(
);
}
}
导出默认主页;

您应该在主页上使用connect,如

import React from 'react';    
import {connect} from "react-redux";
import { View, Text } from 'react-native';
import styles from './styles';
import { Container} from 'native-base';
import { MapContainer} from '../../components/MapContainer';
import GetLocation from 'react-native-get-location'
import {Dimensions} from "react-native";

import {
    getCurrentLocation,
    getInputData,
} from '../../actions/currentLocation';

const {width,height}=Dimensions.get("window");
const ASPECT_RATIO=width/height;
const LATITUDE_DELTA=0.922;
const LONGITUDE_DELTA=ASPECT_RATIO*LATITUDE_DELTA

class Home extends React.Component{

  constructor(props){
    super(props);
    this.state={
      latitude:3.14662,
      longitude:101.6984,
      latitudeDelta:LATITUDE_DELTA,
      longitudeDelta:LONGITUDE_DELTA
    }
  }
  componentDidMount(){
    GetLocation.getCurrentPosition({
      enableHighAccuracy: true,
      timeout: 15000,
  })
  .then(location => {
      this.setState({
      latitude:location.latitude,
      longitude:location.longitude
      })
      console.log(location)
      console.log(this.state.longitude);
  })
  .catch(error => {
      const { code, message } = error;
      console.warn(code, message);
  })  }

  render(){
    const region={
      latitude:this.state.latitude,
      longitude:this.state.longitude,
      latitudeDelta:this.state.latitudeDelta,
      longitudeDelta:this.state.longitudeDelta
    }
    return(
      <Container>
          <MapContainer region={region} getInputData={this.props.getInputData} />
      </Container>
    );
  }

}

const mapStateToProps=(state)=>({
    region:state.region,
    inputData:state.inputData || {}
});

const mapActionCreators = {
    getCurrentLocation,
    getInputData,
};

export default connect(mapStateToProps,mapActionCreators)(Home);
从“React”导入React;
从“react redux”导入{connect};
从“react native”导入{View,Text};
从“./styles”导入样式;
从“本机基”导入{Container};
从“../../components/MapContainer”导入{MapContainer};
从“反应本机获取位置”导入GetLocation
从“react native”导入{Dimensions};
进口{
getCurrentLocation,
getInputData,
}来自“../actions/currentLocation”;
const{width,height}=Dimensions.get(“窗口”);
常量纵横比=宽度/高度;
常数纬度δ=0.922;
常量经度增量=纵横比*纬度增量
类Home扩展了React.Component{
建造师(道具){
超级(道具);
这个州={
纬度:3.14662,
经度:101.6984,
纬度三角洲:纬度三角洲,
经度三角洲:经度三角洲
}
}
componentDidMount(){
GetLocation.getCurrentPosition({
EnableHighAccurance:正确,
超时:15000,
})
。然后(位置=>{
这是我的国家({
纬度:位置。纬度,
经度:location.longitude
})
console.log(位置)
log(this.state.longitude);
})
.catch(错误=>{
常量{代码,消息}=错误;
控制台。警告(代码、消息);
})  }
render(){
恒定区={
纬度:这个州,纬度,
经度:this.state.longitude,
latitudeDelta:this.state.latitudeDelta,
longitudeDelta:this.state.longitudeDelta
}
返回(
);
}
}
常量mapStateToProps=(状态)=>({
地区:州,
inputData:state.inputData | |{}
});
常量mapActionCreators={
getCurrentLocation,
getInputData,
};
导出默认连接(MapStateTops、mapActionCreators)(主页);

但这与我当时所做的有何不同?
import React from 'react';    
import {connect} from "react-redux";
import { View, Text } from 'react-native';
import styles from './styles';
import { Container} from 'native-base';
import { MapContainer} from '../../components/MapContainer';
import GetLocation from 'react-native-get-location'
import {Dimensions} from "react-native";

import {
    getCurrentLocation,
    getInputData,
} from '../../actions/currentLocation';

const {width,height}=Dimensions.get("window");
const ASPECT_RATIO=width/height;
const LATITUDE_DELTA=0.922;
const LONGITUDE_DELTA=ASPECT_RATIO*LATITUDE_DELTA

class Home extends React.Component{

  constructor(props){
    super(props);
    this.state={
      latitude:3.14662,
      longitude:101.6984,
      latitudeDelta:LATITUDE_DELTA,
      longitudeDelta:LONGITUDE_DELTA
    }
  }
  componentDidMount(){
    GetLocation.getCurrentPosition({
      enableHighAccuracy: true,
      timeout: 15000,
  })
  .then(location => {
      this.setState({
      latitude:location.latitude,
      longitude:location.longitude
      })
      console.log(location)
      console.log(this.state.longitude);
  })
  .catch(error => {
      const { code, message } = error;
      console.warn(code, message);
  })  }

  render(){
    const region={
      latitude:this.state.latitude,
      longitude:this.state.longitude,
      latitudeDelta:this.state.latitudeDelta,
      longitudeDelta:this.state.longitudeDelta
    }
    return(
      <Container>
          <MapContainer region={region} getInputData={this.props.getInputData} />
      </Container>
    );
  }

}

const mapStateToProps=(state)=>({
    region:state.region,
    inputData:state.inputData || {}
});

const mapActionCreators = {
    getCurrentLocation,
    getInputData,
};

export default connect(mapStateToProps,mapActionCreators)(Home);