web-dev-qa-db-fra.com

La propriété 'valeur' ​​n'existe pas dans le type 'Lecture seule <{}>'

J'ai besoin de créer un formulaire qui affichera quelque chose basé sur la valeur de retour d'une API. Je travaille avec le code suivant:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value); //error here
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Je reçois l'erreur suivante:

error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

J'ai eu cette erreur dans les deux lignes que j'ai commentées sur le code. Ce code n'est même pas le mien, je l'ai eu sur le site officiel de réaction ( https://reactjs.org/docs/forms.html ), mais cela ne fonctionne pas ici.

J'utilise l'outil create-react-app.

reactjstypescript
80
Luis Henrique Zimmermann

La Componentest définie comme ceci:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Cela signifie que le type par défaut pour l'état (et les accessoires) est: {}.
Si vous voulez que votre composant ait value dans l'état, vous devez le définir comme suit:

class App extends React.Component<{}, { value: string }> {
    ...
}

Ou:

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}
156
Nitzan Tomer

En plus de la réponse de @ nitzan-tomer, vous avez également la possibilité d’utiliser des inferfaces :

interface MyProps {
  ...
}

interface MyState {
  value: string
}

class App extends React.Component<MyProps, MyState> {
  ...
}

soit c'est bien, tant que vous êtes cohérent.

31
Leo