时间戳

首页 > 解决方案 > 使用布尔值的数组依赖性时，useEffect 始终有效

reactjs - 使用布尔值的数组依赖性时，useEffect 始终有效

问题描述

我正在使用 useeffect 来捕获操作成功消息并显示成功消息。它工作正常，但是当我转到其他页面并返回时，总是会显示成功消息。我将添加示例代码..

const saveProfile = (userData) => dispatch(_UpdateProfile(userData));
const saveProfileSuccess = useSelector(state => state.UserReducer.saveProfileSuccess);

useEffect(() => {
    if (saveProfileSuccess) {
      showSuccessMessage("The user profile has been updated successfully.");
    }
  }, [saveProfileSuccess])

场景是......我需要在调用“saveProfile”操作方法后显示成功消息并做一些事情。所以保存完成后，成功结果“saveProfileSuccess”将为真。“saveProfileSuccess”的值为真，当我们去其他页面并返回并进入useEffect并再次显示成功消息时。

标签： reactjsreact-hooks

解决方案

当您保存配置文件时，您将触发一个更新saveProfileSuccess减速器中存储的操作。

一旦这个值被改变，useEffect 就会被触发，因为它是一个依赖项。当您转到不同的路线并再次返回该页面时，您会再次看到successMessage，因为

useEffect(() => {
    if (saveProfileSuccess) {
      showSuccessMessage("The user profile has been updated successfully.");
    }
  }, [saveProfileSuccess])

上述 useEffect 会在组件第一次挂载时以及 saveProfileSuccess 值发生变化时运行。

所以你应该做的是，当你从这个组件卸载时，你可以在 useEffect 中添加一个清理功能。

useEffect(() => {
    return () => // fire your action here which sets the saveProfileSuccess to false
  }, [])

推荐阅读