Vyhledávání na webu

Chyba TS2322 v Create React App s TypeScript při použití Context API + hooku useState?

Mám super jednoduchý projekt v Reactu s TypeScriptem, který používá Context API k předávání hooku useState.

export const AppContext = React.createContext(null);

function App() {
  const [value, setValue] = React.useState(3);

  return (
    <AppContext.Provider
      value={{
        value,
        setValue
      }}
    >
      <div>
        <h1>App</h1>
        <Child />
      </div>
    </AppContext.Provider>
  );
}

Na Code Sandbox to funguje dobře: https://codesandbox.io/s/interesting-lamarr-fyy1b

Nicméně když vytvořím projekt pomocí Create React App (npx create-react-app project-name --typescript) a zkusím stejný kód, dostanu chybu:

Typ '{ value: number; setValue: Dispatch>; }' nelze přiřadit k typu 'null'. TS2322

Myslím, že se to děje, protože null je počáteční hodnota pro AppContext, ale pak je přepsána hodnotou value předanou do Provider?

Pokud je tomu tak, jak to mohu opravit? Předpokládám, že jedním způsobem je uvolnit nastavení TypeScriptu. Existuje však elegantnější způsob, jak napsat kód, který tomuto problému zabrání? Jsem nový v TypeScriptu a v Context API, takže si nejsem jistý, jestli něco nedělám špatně.

Odpověď č. 1

Toto není problém s Typescriptem. Všichni pro práci potřebujete změnit tento řádek:

export const AppContext = React.createContext(null);

k této linii:

export const AppContext = React.createContext({});

P.S. a moje rada, přepište svou komponentu Child pomocí AppContext.Consumer takto:

const Child = () => {
  return (
      <AppContext.Consumer>
        {({ value, setValue }) => (
          <div>
            <h2>{value}</h2>
            <button onClick={() => setValue(value + 1)}>Click</button>
          </div>
        )}
      </AppContext.Consumer>
  );
};

Odpověď č. 2

Zkoušel jste definovat stát jako

React.useState<number|null>

?

Související články