Question

假设我有一些连接到路由器和redux的组件。当状态“isLoggedIn”变为false时，我希望组件自动重定向到另一个路由。这就是我到目前为止所做的：

withRouter(connect(
    state => ({
      isLoggedIn: selectors.getIsLoggedIn(state),
    })
  )(
    class AdminGate extends React.Component {
      render() {
        const { isLoggedIn, router, ...restProps } = this.props;
        if (!isLoggedIn) {
          router.push('/');
        }
        return isLoggedIn ? <InnerComponent {...restProps} /> : <div>Prohibited</div>;
      }
    }
  ))

目前以下情况有效，但我在控制台中看到错误：

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

如果我将此逻辑移至componentWillMount，则显然只运行一次。

设置这样的东西的正确方法是什么？我理解我可能会修改logOut方法来执行router.push，但这并不理想。我更喜欢组件根据状态来处理它。

Answer 1

我认为您可以尝试使用componentWillUpdate(nextProps, nextState)生命周期方法，以查看它是否已登录。

在React路由器中以编程方式重新路由的位置？

1 个答案: