Реагирующая встроенная навигация «Невозможно прочитать свойство« toString »из неопределенного» с использованием избыточного соединения

Question

Я создаю реактивное приложение, использующее expo, redux и act-navigation , используя Typescript.

Я хочу сделать LoginScreen,и когда пользователь вошел в систему, перейдите к главному экрану с нижней панелью навигации.В двух словах:

1. LoginScreen

2. MainScreen

   2.1.Заказы

   2.2.Настройки

Чтобы сделать это, я следовал за этим post :

const AppNavigator = createBottomTabNavigator({OrdersContainer, SettingsScreen});

const LoginNavigator = createStackNavigator({ LoginContainer, RegisterContainer});

const RootNavigator = createSwitchNavigator({ LoginNavigator, AppNavigator });

Затем, есть типичный поток с избыточностью.Когда кнопка входа в систему нажата, действие для входа в систему выполняет диспетчеризацию, а затем редуктор обновляет состояние.

Затем componentDidUpdate на экране входа в систему называется:

componentDidUpdate(currentProps: LoginScreenProps) {
  var accessToken =  currentProps.user.accountInfo.accessToken;
  if(accessToken) {
    this.props.navigation.navigate("OrdersContainer");
  };
}

function mapStateToProps(state: AppState): LoginScreenProps {
  return {
    user: state.user
  } as LoginScreenProps;
}

Now,когда выполняется навигация, выдается следующее исключение:

TypeError: TypeError: Cannot read property 'toString' of undefined
This error is located at:
in Connect(OrdersScreen) (at withNavigation.js:23)
in withNavigation(Connect(OrdersScreen)) (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:477)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:60)

Что мне не хватает?

Спасибо !!

Редактировать :Добавлен файл OrdersScreen

interface OrderScreenProps {
  Orders: Map<string, Order[]>;
  customer: Customer;
  user: User;
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;

  listOrders: (customer: Customer, user: User) => OrderAction<Order[]>;
}


export class OrdersScreen extends React.Component<OrderScreenProps> {

  static navigationOptions = {
      header: (
        <View style={headerStyles.container}>
          <Text style={headerStyles.text}>Orders</Text>
        </View>
      )
  };

  constructor(props: OrderScreenProps) {
    super(props);
  }

  render() {
    return  <OrderListView 
              Orders={this.props.Orders}
            />;
  }

  componentDidMount() {
    this.props.listOrders(this.props.customer, this.props.user);
  }

}

function mapStateToProps(state: AppState): OrderScreenProps {
  return {
      user: state.user,
      customer: state.customer
  } as OrderScreenProps;
}

function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
  return bindActionCreators({
    listOrders: listOrdersActionCreator
  }, dispatch);
}


const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));

export { OrdersContainer };

Answer 1

Я нашел проблему.Проблема была связана с неправильным использованием перечислений в TypeScript.

Действия редуктора были созданы как

export enum ProductActionType  {
    LIST_ORDERS
}

Это решает мою проблему:

export enum ProductActionType  {
    LIST_ORDERS = "LIST_ORDERS"
}