web-dev-qa-db-fra.com

Le type d'élément JSX 'App' n'est pas une fonction constructeur pour les éléments JSX. Les types de propriété 'setState' sont incompatibles

J'utilise le Microsoft TypeScript-React-Starter et j'ai cette erreur de compilation pendant npm start:

./src/index.tsx
(16,5): error TS2605: JSX element type 'App' is not a constructor function for JSX elements.
  Types of property 'setState' are incompatible.
    Type '{ <K extends never>(f: (prevState: null, props: {}) => Pick<null, K>, callback?: (() => any) | un...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: (() => any) | undef...'.
      Types of parameters 'f' and 'f' are incompatible.
        Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: null, props: {}) => Pick<null, any>'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'null' is not assignable to type '{}'.

Il semble donc que ma fonction setState a une signature incorrecte, mais je ne sais pas comment la résoudre. Voici mon code:

class App extends React.Component<{}, null> {
  render() {
    return (
      <div className="App">
        ...
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

J'utilise:

node v6.11.0
npm v5.1.0
TypeScript v2.4.1
react v15.6.1
redux v3.7.1
react-redux v5.0.5
react-scripts-ts v2.3.2

Mettre à jour:

J'ai découvert que la suppression des types génériques <{}, null> efface l'erreur. Mais j'aimerais quand même savoir pourquoi j'ai eu l'erreur.

reactjstypescript2.0
10
CherryQu

TLDR; État ne peut être nul. Déclarez une interface ou déclarez-la {}

La réponse réside dans @ types/react

En regardant la definition , ni l'état ni les accessoires ne sont censés être nuls.

Lorsque vous avez déclaré App en tant que class App extends React.Component<{}, null> {, vous avez essentiellement déclaré que "l'état est de type null".

Maintenant, le type de setState dépend du type que vous spécifiez pour state et il s'est heurté à la version lesser de la setState api . prevState est déclaré en tant que {} (valeur par défaut car aucune interface d'état n'a été spécifiée), ce qui n'est pas compatible avec null, ce qui entraîne le journal des erreurs que vous avez vu.

15
Manas Jayanth

Vous avez le même problème sans avoir <{}, null> après class App extends React.Component. Voici la solution dans mon cas.

Changer import React from 'react';

à import * as React from 'react';

0
Tatsu