reactjs - Hur man växlar med Zustand

Jag har skapat följande butik med Zustand:

import create from "zustand"

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

Jag antog att detta skulle vara det rätta sättet att växla värdet på show. Men TypeScript är inte nöjd -- det har en röd vågig linje under show i !state.show med följande felmeddelande:

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

Har du någon aning om varför jag får det felmeddelandet och hur jag kan ställa in en växlingsfunktion korrekt med Zustand?

Tack.

Svar #1

Typescript vet inte hur ditt state borde se ut, så det antar att state är ett vanligt objekt.

För att lösa detta kan du definiera en typ för din butik. Sedan kan du skicka den typen till create-funktionen som en generisk:

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

Detta gör att TypeScript blir medveten om vilka egenskaper som förväntas finnas i din butik. Det kommer inte längre att ge ett fel för delen !state.show, och det kommer att erbjuda meningsfull autokomplettering när du använder butiken.

Relaterade artiklar