reactjs - getInputData 未定义

Question

我收到这个getInputData未定义的错误，请问我做错了什么？

getInputData只需获取用户的输入....我正在使用 redux。我getInputData在我的函数中定义了handleInput或者它没有很好地定义......

import React from "react";
import styles from "./style";
import { Text } from "react-native";
import { View, Input, InputGroup } from "native-base";
import Icon from "react-native-vector-icons/FontAwesome";
import { SearchBar } from "react-native-elements";

export const SearchBox = ({ getInputData }) => {
  const handleInput = (key, val) => {
    getInputData({
      key,
      value: val
    });
  };
  return (
    <View style={styles.searchBox}>
      <View style={styles.inputWrapper}>
        <Text style={styles.label}>PICK UP</Text>
        <InputGroup>
          <Icon name="search" size={15} color="#FF5E3A" />
          <Input
            style={styles.inputSearch}
            placeholder="Enter Pickup Location"
            onChangeText={handleInput.bind(this, "pickUp")}
          />
        </InputGroup>
      </View>
      <View style={styles.inputWrapper}>
        <Text style={styles.label}>DROP OFF</Text>
        <InputGroup>
          <Icon name="search" size={15} color="#FF5E3A" />
          <Input
            style={styles.inputSearch}
            placeholder="Enter Drop Off Location"
            onChangeText={handleInput.bind(this, "dropOff")}
          />
        </InputGroup>
      </View>
    </View>
  );
};
export default SearchBox;

这是我的 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

这是我连接mapStateToProps到我的mapActionCreators

import {connect} from "react-redux";
import {
    getCurrentLocation,
        getInputData,
} from '../../actions/currentLocation';
import { MapContainer } from '../MapContainer';
import Home from "../../screens/Home";

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

const mapActionCreators = {
    getCurrentLocation,
    getInputData,
};

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

这是我的家庭密码。

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;

标签： reactjsreact-nativereact-redux

Answer 1

您应该在主页上使用连接，例如

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