Question

我有一个React Redux项目。我有以下方法：

const UmvValidator = (actions) => {
    const expiryTime = localStorage.getItem('expiryTime')
    const currentTime = moment().valueOf()
    if (expiryTime) {
        if (expiryTime.valueOf() > currentTime) {
            localStorage.clear('expiryTime')

        }
    } else {
        actions.directToLogin()
    }
}

actions.directToLogin（）看起来像这样：

export function directToLogin() {
    return function (dispatch) {
        dispatch(push('/'));
    }
}

当我的组件第一次像这样渲染时，我想运行一次此方法：

componentWillMount() {
        const { actions } = this.props
         umvValidator(actions)
    }

这个想法是，如果到期时间晚于当前时间，则用户将被重定向到主页。这种工作-将用户从一页引导到主页。但是，由于umvValidator不断被调用，因此主页继续在主页和原始页面之间闪烁！

我不知道要解决这个问题，谢谢您的帮助！

Answer 1

像这样吗？

 const UmvValidator = (actions) => {
        const expiryTime = localStorage.getItem('expiryTime');
        const init = localStorage.getItem('init');
        const currentTime = moment().valueOf()
        if (expiryTime && !init) {
            if (expiryTime.valueOf() > currentTime) {
                localStorage.clear('expiryTime')

            }
        } else {
            localStorage.setItem('init',1)
            actions.directToLogin()
        }
    }

Answer 2

组件不停地安装和拆卸是不正常的。这就是问题所在。修复此问题后，它将仅安装一次，而您的UmvValidator函数将仅被调用一次。

因为在您的示例中看到了与路线相关的代码，所以我怀疑您的组件可能位于您的router视图元素的内部（的子元素）（我不知道您是什么使用）。因此，每次您的组件调用actions.directToLogin（）时，路由都会更改，并且会创建同一组件的新实例并再次唤醒，并在循环中调用UmvValidator。

所以不是：

<div>
  <routerView>
    <MyComponent/>
    <OtherStuff>
  </routerView>
</div>

执行：

那只是伪代码来说明我在说什么。

另一个原因可能是您有条件地渲染组件，并且条件发生了很大变化，并导致组件的安装和卸载：

render(){
  return (
       <div>
       {conditionThatChangesALot && <MyComponent/>}
       </div>
  )
}

我希望这对您有帮助

在React中只运行一次函数？

2 个答案: