web-dev-qa-db-fra.com

React, la propriété TypeScript 'setState' est manquante dans le type

Je reçois une erreur ts de mon composant de réaction. Le composant fonctionne correctement (construction, etc.), mais TypeScript affiche une erreur dans l’idéal. Pas sûr de savoir comment je dois déclarer cela pour supprimer l'erreur. J'ai essayé de créer une méthode setState dans le composant lui-même, mais cela donnait encore plus d'erreurs.

Erreur: (15, 19) TS2605: le type d'élément JSX 'Home' n'est pas un constructeur fonction pour les éléments JSX. La propriété 'setState' est manquante dans le type 'Accueil'.

"TypeScript": "^ 2.3.4",

"réagir": "^ 15.5.4",

"react-dom": "^ 15.5.4",

! ----

export class App extends React.Component<Props, State> {
  public state: State
  public props: Props

 constructor(props: Props) {
  super(props)
  this.state = {
    view: <Home />, <<<<
    }

- le reste enlevé pour des raisons de brièveté

export class Home extends React.Component<Props, State> {
public state: State;
public props: Props;

constructor(props: Props) {
    super(props)

}
  public render() {
    return <h1>home</h1>
  }
}
reactjstypescript
7
Jimi

Voici un exemple d'utilisation de l'état et du rendu des composants:

type HomeProps = {
    text: string;
}
class Home extends React.Component<HomeProps, void> {
    public render() {
        return <h1>{ this.props.text }</h1>
    }
}

type AppState = {
    homeText: string;
}
class App extends React.Component<void, AppState> {
    constructor() {
        super();

        this.state = {
            homeText: "home"
        };

        setTimeout(() => {
            this.setState({ homeText: "home after change "});
        }, 1000);
    }

    render() {
        return <Home text={ this.state.homeText } />
    }
}

Comme vous pouvez le constater, les objets props et state sont toujours simples et la méthode de rendu est chargée de créer les composants réels.
De cette manière, réaction sait quels composants sont modifiés et quelles parties de l’arborescence DOM doivent être mises à jour.

1
Nitzan Tomer

Avait le même problème, mais mon problème était que J'importais Réagir mal .

La manière correcte de l'importer lors de l'utilisation de TypeScript est avec import * as React from "react".

Exemple de code: 

import * as React from "react"
import ReactDOM from "react-dom"

class App extends React.Component<any, any> {
  render() {
    return (
      <div>Hello, World!</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

Remarque: <any, any> vous permet d'utiliser les propriétés et les variables d'état de votre composant React, mais vous devez généralement les définir vous-même pour tirer parti des annotations de type de TypeScript.

3
Telmo Trooper