reactjs - Typen 'Dispatch' kan inte tilldelas typen '() => void'

Jag försökte titta igenom liknande frågor och artiklar, men inget verkade riktigt fungera. Jag är också något förvirrad över vad felet betyder eftersom jag försökte sätta ett värde och försökte deklarera en typ, men inget av det fungerade.

import React, { createContext, SetStateAction, useState } from 'react';

export const MenuContext = createContext({
    open: false,
    setOpen: () => {},
});
export default function MenuManager(props:any) {
    const [open, setOpen] = useState(false);
    return (
        <MenuContext.Provider value={{ open, setOpen }}>
            {props.children}
        </MenuContext.Provider>
    );
}

Felet som ges tillbaka är

Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '() => void'.

Svar #1

Deklarera ett gränssnitt för MenuContext och typbestäm korrekt kontexten och setOpen-tillståndsuppdateringsfunktionen.

Exempel :

import React, { createContext, SetStateAction, useState, Dispatch } from 'react';

interface IMenuContext {
  open: boolean;
  setOpen: Dispatch<SetStateAction<boolean>>;
}

export const MenuContext = createContext<IMenuContext>({
  open: false,
  setOpen: () => {},
});

Också, istället för any vill du skriva ManuManager-komponentens props.

function MenuManager(props: React.PropsWithChildren<{}>) {
  const [open, setOpen] = useState(false);
  return (
    <MenuContext.Provider value={{ open, setOpen }}>
      {props.children}
    </MenuContext.Provider>
  );
}

Relaterade artiklar