使用未定義的React Native函數設置Redux

Question

我想我已經為我的React本機應用程序設置React Redux了。 我目前已經設置好了。

在這里，我定義了要調用的動作。

 /* actions/mapActions.js */ export const setMarker = selectedMarker => { return { type: 'SET_MARKER', selectedMarker } } 

在這里，我定義了要在其中使用存儲的組件的容器。

 //containers/mapContainers.js import { connect } from 'react-redux'; import { setMarker } from './actions/mapActions' import HomeScreen from './screens/HomeScreen' const mapStateToProps = state => { return { selectedMarker: state.marker } } const mapDispatchToProps = dispatch => { return { markerClick: (marker) => { dispatch(setMarker(marker)) } } } export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen) 

在這里，我結合了減速器，就像我一直在關注的教程中看到的那樣。

 //reducers/index.js import { combineReducers } from 'redux' import mapReducer from './mapReducer' const dabApp = combineReducers({ mapReducer }) export default dabApp 

在這里，我定義了組件的減速器。

 //reducers/mapReducers.js const mapReducer = (state = [], action) => { switch (action.type) { case 'SET_MARKER': return [ ...state, { marker: action.marker } ] default: return state } } export default mapReducer 

應用程序的主要入口點。

 //App.js // other imports here import { Provider } from 'react-redux'; import { createStore } from 'redux'; import snapApp from './reducers'; let store = createStore(dabApp); export default class App extends React.Component { state = { isLoadingComplete: false, }; render() { return ( <Provider store={store}> <View style={styles.container}> {Platform.OS === 'ios' && <StatusBar barStyle="default" />} {Platform.OS === 'android' && <View style={styles.statusBarUnderlay} />} <RootNavigation /> </View> </Provider> ); } } const styles = StyleSheet.create({ //Styles. }); 

在這里，我定義了組件。

 //Standard react imports. import { MapView } from 'expo'; import { connect } from 'react-redux'; export default class HomeScreen extends React.Component { constructor(props) { super(props); this.state = { //Set states. }; } render() { return ( <View style={styles.container}> <MapView //MapView info > {this.state.markers.map((marker) => <MapView.Marker key={marker.id} coordinate={marker.coordinate} onPress={() => {this.props.markerClick(marker); this.props.navigation.navigate('Information');}}> </MapView.Marker> )} </MapView> </View> ); } } const styles = StyleSheet.create({ //Styles. }); 

我得到的錯誤是Map.Marker onPress屬性中的'markerClick'函數未定義。 我認真地按照本教程進行操作，找不到解決方案。

我關注的教程是官方redux站點上的教程。 http://redux.js.org/docs/basics/ExampleTodoList.html 。

有沒有人遇到過同樣的問題？

不幸的是，哈里的答案並沒有解決問題。

我console.log（this.props）和我得到這個：

仍未定義。 當我console.log（this.props“）時，我得到：

  Object { "navigation": Object { "dispatch": [Function anonymous], "goBack": [Function goBack], "navigate": [Function navigate], "setParams": [Function setParams], "state": Object { "key": "Home", "routeName": "Home", }, }, "screenProps": undefined, "selectedMarker": [Function dispatch], "type": "SET_MARKER", } 

所以我什至看不到道具上的功能。

如您所見，該函數未在this.props上定義。

謝謝，

Answer 1

我覺得您正在采取比所需更多的步驟。

嘗試這樣的事情：

import React, { Component } from 'react';
import { MapView } from 'expo';
import { connect } from 'react-redux';
import { View, StyleSheet } from 'react-native';
import { setMarker } from './actions/mapActions'


class HomeScreen extends Component {
  onPress(marker) {
    this.props.setMarker(marker);
    this.props.navigation.navigate('Information');
  }

  render() {
    return (
      <View style={styles.container}>
         <MapView>
           {this.state.markers.map((marker) => (
             <MapView.Marker
               key={marker.id}
               coordinate={marker.coordinate}
               onPress={() => { this.onPress(marker); }}
             />
           )
        )}
      </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  //Styles.
});

export default connect(null, setMarker)(HomeScreen);

您無需定義隨后分派動作的函數，只需將動作連接到組件即可。 將所有內容都放在同一個文件中而不是使用單獨的mapContainers.js也更好