Vyhledávání na webu

reactjs - Jak přepínat pomocí Zustandu

Vytvořil jsem následující obchod pomocí Zustand:

import create from "zustand"

const useStore = create((set) => ({
  show: false,
  toggleShow: () => set((state) => ({ show: !state.show })),
}))

Předpokládal jsem, že toto bude správný způsob, jak přepnout hodnotu show. Nicméně TypeScript není spokojený - pod show v !state.show je červená vlnovka s následující chybovou zprávou:

Property 'show' does not exist on type 'object'.ts(2339)
any

Máte nějaký nápad, proč dostávám tuto chybovou zprávu a jak mohu správně nastavit přepínací funkci pomocí Zustand?

Děkuji.

Odpověď č. 1

Typescript neví, jak by měl váš stav vypadat, takže předpokládá, že stav je obyčejný objekt.

K vyřešení tohoto problému můžete definovat typ pro váš obchod. Poté můžete tento typ předat funkci create jako generický typ:

type MyStore = {
    show: boolean;
    toggleShow: () => void;
};

// note the "<MyStore>" next to create
const useStore = create<MyStore>((set) => ({
    show: false,
    toggleShow: () => set((state) => ({ show: !state.show})),
}))

Tímto způsobem se TypeScript dozví, které vlastnosti lze očekávat ve vašem skladu. Už nebude hlásit chybu pro část !state.show a bude nabízet smysluplné dokončování automaticky, kdykoliv budete sklad používat.

Související články