Question

我要做的是在Auth阶段查询当前用户，获取返回的内容，然后呈现应用程序布局。

流速：

<App /> =＆gt; <Auth />（查询当前用户）=＆gt; {current_user} =＆gt; setAuthUser(current_user)动作=＆gt; <Layout />。

我希望通过连接到商店在整个应用程序中提供此用户。

问题是我在组件渲染时尝试setState而陷入无限循环，并且不确定如何以另一种方式执行此操作。

Auth.jsx

...import statements...

class Auth extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  // Tried using the shouldComponentUpdate lifecycle but running into the same issues
  shouldComponentUpdate() {
     if (loading) { return true; } 
     this.props.SET_AUTH_USER(this.props.data.current_user); <<<<<< Creates loop
  }
  render() {
    const { loading, error, current_user } = this.props.data;
    if (loading) { /* handle loading */ }
    if (error) { /* handle error */ }

    if (current_user) {
      //this.props.SET_AUTH_USER(); <<<<<<< This again creates the loop
      <Layout />;
    }
    return ;
  }
}

export default compose(graphql(fetchCurrentUser),connect(mapStateToProps, mapDispatchToProps))(Auth);

我最初尝试将其作为一个功能组件，并且错误的想法可能使用像shouldComponentUpdate这样的LifeCycle方法，我尝试过的所有内容都会让我在渲染无法工作的组件时设置状态。

我见过的很多例子都是通过用户操作并使用bind来讨论这个问题。但我想在同步方法中完成这项工作。有没有办法让这个运行？

我想到的其他选项可能是在需要时运行当前用户查询或设置cookie。理想情况下，想在Redux商店中使用它。

从GraphQL查询更新Redux存储

0 个答案: