react-native - TypeError: undefined is not an object (评估 '_this2.props.showModal')

Question

我为此模式设置了 redux，但我不断收到此错误，我不知道为什么？这是我的以下代码。我现在想知道错误来自哪里，我该如何解决？

应用程序：

function App() {
  return (
    <Provider store={store}>
    <NavigationContainer>
      <DrawerScreen />
      <InfoModal />
    </NavigationContainer>
    </Provider>
  );
}

export default App;

减速器：常量 ID_INITIAL_STATE = '';

export const id = createReducer(ID_INITIAL_STATE, {
  ["MODAL__SET_ID"](state, { payload }) {
    return payload;
  }
});

export const ModalReducer = combineReducers({
  id,
});

动作文件如下：

const showModal = ({ id }) => {
    return dispatch => {
      dispatch({
        type: "MODAL__SET_ID",
        payload: id
      });
    };
  };
  
  export const hideModal = () => {
    return dispatch => {
      dispatch({
        type: "MODAL__SET_ID",
        payload: ""
      });
    };
  };
  
export const ModalActions = {
    showModal,
    hideModal
  };

模态本身：

const Modals = {
  KingsInfo: kingsInfo,
}

export class InfoModal extends React.Component {
  render() {
    const {id, modalProps, hideModal} = this.props;
    const ModalView = Modals[id] || function() {};
    return (
      <Modal visible={Boolean(id)} animationType="fade">
        <View
          style={{
            flex: 1,
            padding: 20,
            justifyContent: "space-between"
          }}
        >
          <View />
          <ModalView {...modalProps} />
          <Button onPress={hideModal} title="Close" color="blue" />
        </View>
      </Modal>
    );
  }
}

const mapStateToProps = state => {
  return {
    id: state.modal.id,
    modalProps: state.modal.modalProps,
  };
};

const mapDispatchToProps = {
  hideModal: ModalActions.hideModal
};

const ConnectedRootModal = connect(
  mapStateToProps,
  mapDispatchToProps
)(InfoModal);

export default ConnectedRootModal;

还有我的导航器文件，我想在其中触发显示模式。

    export function MainPage(this: any, {navigation}: any) {
      return (
        <MainStack.Navigator initialRouteName="SplashPage">
          <MainStack.Screen
            name="SplashPage"
            component={SplashPage}
            options={{
              headerShown: false,
            }}
          />
          <MainStack.Screen
            name="Home"
            component={Home}
            options={() => {
              return {
                headerTitle: '',
                headerTransparent: true,
                headerShown: false,
              };
            }}
          />
          <MainStack.Screen
            name="Settings"
            component={Settings}
            options={() => {
              return {
                headerTitle: 'Settings',
                headerTransparent: true,
                headerShown: true,
                headerRight: () => <View />,
                headerTitleStyle: {
                  color: '#fff',
                  fontSize: 30,
                  textAlign: 'center',
                },
                headerTintColor: '#fff',
              };
            }}
          />
          <MainStack.Screen
            name="Games"
            component={GamesScreen}
            options={({navigation}) => {
              return {
                headerTitle: 'Games',
                headerTransparent: true,
                headerShown: true,
                headerLeft: () => (
                  <Icon
                    name={'menu'}
                    style={styles.hamburgerMenu}
                    onPress={() => {
                      navigation.toggleDrawer();
                    }}
                  />
                ),
                headerRight: () => <View />,
                headerTitleStyle: {
                  color: '#fff',
                  fontSize: 30,
                  textAlign: 'center',
                },
              };
            }}
          />
          <MainStack.Screen
            name="Kings"
            component={Kings}
            options={{
              headerTitle: 'Kings',
              headerTransparent: true,
              headerShown: true,
              headerBackTitleVisible: false,
              headerTintColor: '#fff',
              headerRight: () => (
                <Icon
                name={'info-outline'}
                style={styles.infoButton}
                onPress={() => {
                  this.props.showModal({ id: 'KingsInfo' });
                }}
              />
              ),
              headerTitleStyle: {
                color: '#fff',
                fontSize: 30,
                textAlign: 'center',
              },
            }}
          />
        </MainStack.Navigator>
const mapStateToProps = state => {
  return {
    modal: state.modal,
  };
};

const mapDispatchToProps = {
  showModal: ModalActions.showModal,
};

const ConnectedDetailsScreen = connect(
  mapStateToProps,
  mapDispatchToProps,
)(MainPage);

标签： react-nativereact-redux