首页 > 解决方案 > 尝试根据 redux 状态有条件地设置导航链接

问题描述

我试图根据最初未定义但在 API 调用后异步设置的 redux 状态有条件地设置导航链接,但是,导航链接在 api 响应之前呈现一次,因此始终未定义。我正在寻找一些关于如何使用 react-native 和 redux 成功地做到这一点的建议。

路线配置是 -

export default createBottomTabNavigator(
    {
        Home: HomeStack,
    Search: SearchStack,
    ...!store.getState().UserReducer.user_id ? { Login: LoginStack } : { }
    }
);

父组件是 -

export default class App extends Component
{
  constructor(props)
  {
    super(props);

    this.state = {
      isLoggedIn: false,
    }
  }

  componentWillMount()
  {
    fetch(ApiConfig.user.is_logged_in())
    .then(response => response.json())
    .then(({data}) => {
      if (data.status === false)
        return;
      // Set user information.
      store.dispatch(setUserId(data.session.user_id));
      store.dispatch(setUserName(data.session.username));
      store.dispatch(setUserEmail(data.session.email));
      store.dispatch(setUserLastLogin(data.session.old_last_login));
      store.dispatch(setUserLastIp(data.session.last_ip));
      store.dispatch(setShowCost(data.session.show_cost));
      store.dispatch(setShowPrice(data.session.show_price));
      store.dispatch(setAvatar(data.session.avatar));
      this.setState({ isLoggedIn: true });
    })
    .catch(error => console.error(error));
  }

  render()
  {
    return (
      <Provider store={store}>
        <NavigationStack loggedIn={this.state.isLoggedIn} />
      </Provider>
    );
  }
}

标签: reactjsreact-nativereduxreact-reduxreact-navigation

解决方案


推荐阅读