Início / coding / Perguntas / 79298763
Accepted
mikeb
Asked: 2024-12-21 10:05:19 +0800 CST

Zustand useStore - arg é indefinido na nova renderização

  • 772

Tenho uma loja Zustand que não funciona bem depois que entro no meu aplicativo e atualizo a loja.

Aqui está minha loja:

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,}))
    }));

Aqui está meu componente:

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])

Eu efetuo login normalmente, mas no meu retorno de chamada depois que ligo loggedIn(cu)recebo um erro.

Acho que a página é renderizada novamente e gera o erro, que é:

Uncaught TypeError: a is undefined

Isso se refere claramente a useAuthStore(useShallow(a => (ser chamado para nova renderização com aindefinido.

O que acontece aqui? Isso parece bem simples, mas não consigo fazer funcionar...

reactjs

1 respostas

  1. Best Answer

    Na documentação do Zustand , o estado pode ser atualizado como:

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

    Parece que você combinou as duas maneiras no seu código:

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

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

    O que realmente aconteceu:

    1. O estado está definido corretamente: set({...ctx}).
    2. O estado é definido novamente como o que a função set() retorna (void, ou seja, indefinido): set((state) => undefined).
    • 0

relate perguntas