redux 是否在React中仅运行一次函数？

jvidinwx 于 2022-11-24 发布在 React

关注(0)|答案(2)|浏览(165)

我有一个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()
    }
}

操作.directToLogin（）看起来像这样：

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

我希望在组件首次呈现时运行一次此方法，如下所示：

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

其思想是如果过期时间晚于当前时间，用户将被重定向到主页。这种工作方式-用户从一个页面被定向到主页。然而，主页继续在主页和原始页面之间闪烁，因为umvValidator不断被调用！
我没有办法解决这个问题，谢谢你的帮助！

redux

来源：https://stackoverflow.com/questions/51506607/run-function-only-once-in-react

2条答案

按热度按时间

owfi6suc1#

像这样的东西？

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()
        }
    }

赞(0）回复(0）举报 2022-11-24

lc8prwob2#

你的组件总是挂接和卸载是不正常的。这就是问题所在。一旦你解决了这个问题，它将只挂接一次，你的UmvValidator函数将只被调用一次。
因为我在你的例子中看到了与路由相关的代码，我怀疑你的组件可能在router视图元素（我不知道你在使用什么）的 * 内部 *（子元素）。所以每次你的组件调用actions.directToLogin（）时，路由都会改变，同一组件的一个新示例会被创建并再次唤醒，在一个循环中调用UmvValidator。
所以改为：

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

执行：
这只是用来说明我所说的伪代码。
另一个原因可能是您有条件地呈现组件，而该组件的条件变化很大，并导致组件装入和卸载：

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

我希望这对你有帮助

赞(0）回复(0）举报 2022-11-24

我来回答

redux 是否在React中仅运行一次函数？

2条答案

相关问题

热门标签

最新问答