主页 / coding / 问题 / 79298763
Accepted
mikeb
Asked: 2024-12-21 10:05:19 +0800 CST

Zustand useStore - arg 在重新渲染时未定义

  • 772

我有一个 Zustand 商店，在我登录我的应用程序并更新商店后，它出现故障。

这是我的商店：

import {create} from 'zustand'

import {ITRUserInfoDTO, LoginResponse} from "../itr-client";

export type UserContextValue = {
    credentials: LoginResponse | null,
    expiration: number | null,
    user: ITRUserInfoDTO | null
}

export interface AuthState extends UserContextValue {
    loggedIn: (ctx: UserContextValue) => void
    logout: () => void
}

export const LOGGED_OUT_USER_CONTEXT: UserContextValue = {
    credentials: null,
    expiration: null,
    user: null
}

export const useAuthStore = create<AuthState>(
    (set) => ({
        ...LOGGED_OUT_USER_CONTEXT,
        loggedIn: (ctx: UserContextValue) => set((state) => set({...ctx})),
        logout: () => set((state) => set({...LOGGED_OUT_USER_CONTEXT,}))
    }));

这是我的组件：

export default function LoginPage() {
    const {user, loggedIn} = useAuthStore(useShallow(a => ({user: a.user, loggedIn: a.loggedIn})))
    const [searchParams, setSearchParams] = useSearchParams();
    const redirectLocation = searchParams.get('redirect');
    const navigate = useNavigate()

    const go = () => redirectLocation > 0 ? navigate(redirectLocation, {replace: true}) : navigate('/home', {replace: true});
    // useEffect(() => {
    //     if (user) {
    //         go()
    //     }
    // })

    const tryLogin = useCallback((loginDTO) => {
        const authApi = new AuthenticationApi();
        authApi.authenticate({loginDTO})
            .then(loginResult => {
                const configuration = new Configuration({accessToken: loginResult.token});
                const userInformationApi = new UserInformationApi(configuration);
                userInformationApi.getMe().then(me => {
                    const cu = {
                        credentials: loginResult,
                        expiration: new Date().getTime() + loginResult.expiresIn,
                        user: me,
                    }
                    // alert(JSON.stringify(cu))
                    loggedIn(cu)
                }).catch(e => {alert(`Error: ${JSON.stringify(e)}`); console.error(e)});
            })
            .catch(error => console.error('Error', error))
            .finally(() => console.log("Done logging in"))
    }, [loggedIn, user])

我登录正常，但在调用后的回调中loggedIn(cu)出现错误。

我认为页面重新渲染并抛出错误，即：

Uncaught TypeError: a is undefined

这显然是指useAuthStore(useShallow(a => (在重新渲染时使用a未定义进行调用。

这是怎么回事？这看起来很简单，但我无法让它工作……

reactjs

1 个回答

  1. Best Answer

    从 Zusand文档中，状态可以更新为：

    import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,

  // based on previous state
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),

  // without using the previous state
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

    你似乎在代码中结合了这两种方式：

    // This line is the issue
loggedIn: (ctx: UserContextValue) => set((state) => set({...ctx})),

// Fix:
loggedIn: (ctx: UserContextValue) => set({...ctx}),
logout: () => set({...LOGGED_OUT_USER_CONTEXT}))

    实际情况：

    1. 状态设置正确：set({...ctx})。
    2. 状态再次设置为set（）函数返回的状态（void，即未定义）set((state) => undefined)：。
    • 0

相关问题