时间戳

首页 > 解决方案 > 在 useEffect() 中对更改状态做出无限循环反应

javascript - 在 useEffect() 中对更改状态做出无限循环反应

问题描述

我正在尝试更新 a 中的状态useEffect，我得到：

React HookuseEffect缺少一个依赖项：'user'。包括它或删除依赖数组。如果您在“setUser”调用中只需要“用户”，您也可以进行功能更新“setUser（u => ...）” react-hooks/exhaustive-deps

如果我将用户状态作为依赖项，那么我会得到一个无限循环。

    const [user, setUser] = useState({
        displayName: '',
        hasPassword: false,
        ...
    });

    let { userId } = useParams();
    
    useEffect(() => {
    
        const checkPassword = async (userId) => {

            try {
                const res = await UserService.checkPassword(userId);

                if (res.status === 200) {
                    setUser({...user, hasPassword: res.data.hasPassword });
                }

            } catch (err) {
                setUser({...user, hasPassword: false });
            }
        };

        checkPassword(userId);
        
    }, [userId, user]);

如果我从依赖数组中删除用户，则一切正常，但我正在尝试摆脱该警告。我只需要执行一次这个函数。

标签： javascriptreactjsreact-hooks

解决方案

我猜你可以使用之前的状态user而不是状态user：

setUser(prevState => ({
   ...prevState,
   hasPassword: res.data.hasPassword
}));

因此，您不需要user依赖数组。

最终代码将与建议：

useEffect(() => {
    const checkPassword = async (userId) => {
       try {
          const res = await UserService.checkPassword(userId);

          if (res.status === 200) {
             setUser(prevState => ({
                ...prevState,
                hasPassword: res.data.hasPassword
             }));
          }
       } catch (err) {
          setUser(prevState => ({
             ...prevState,
             hasPassword: false
          }));
       }
    };

    checkPassword(userId);    
}, [userId]);

推荐阅读