Question

我有以下自定义钩子：

import { useEffect, useState } from 'react';

import { AuthType } from '../types';

export function useAuth() {
  const [ authData , setAuthData ] = useState<AuthType>();

  useEffect(() => {
    if ( authData && authData.JWT ) {
      localStorage.setItem( 'JWT', authData.JWT );
    }
  }, [ authData ]);

  return {
    authData,
    isAuth: authData !== undefined,
    setAuthData
  };
}

我在我的标题中使用它：

export default function Header() {
  const { isAuth, authData } = useAuth();
  console.log(isAuth);
  return <div> {isAuth} </div>;
}

而且我总是得到 false，我在这里做错了吗？在我的登录组件中，我正在使用 setAuthData 更新我的 authData：

const { setAuthData } = useAuth();

axios.post().then(({ data }) => {
  setAuthData({
    PWT: data.PWT,
    ...
  });
})

Answer 1

钩子的每个实例都有自己的状态。

当您在 Header 组件和 Login 组件中使用钩子时，它们不会共享状态。

当您登录组件调用 setAuthData 时，它只会更新返回给登录组件的 authData 变量。返回到 Header 组件的另一个 authData 未受影响。

您需要某种方式在钩子之间共享状态，例如 context 或 redux store。

为什么我没有收到更新的对象？

1 个答案: