Question

我正在使用expo， redux 和 react-navigation 使用Typescript创建一个本机应用程序。

我想做一个LoginScreen，当用户登录时，导航到带有底部导航栏的MainScreen。简而言之：

LoginScreen
主屏幕

2.1。订单

2.2。设置

为此，我遵循了post：

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

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

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

然后，是带有redux的典型流。按下登录按钮后，登录操作将进行调度，然后减速器将更新状态。

然后，在LoginScreen中的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;
}

现在，当执行“导航”时，将引发以下异常：

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"
}

使用Redux Connect的本地反应导航'无法读取未定义的属性'toString'

1 个答案: