web-dev-qa-db-fra.com

React avec ES7: TypeError non capturé: impossible de lire la propriété 'state' of non définie

Je reçois cette erreur Uncaught TypeError: impossible de lire la propriété 'state' de indéfini à chaque fois que je tape quelque chose dans la zone de saisie de AuthorForm. J'utilise React avec ES7.

L'erreur se produit sur ème ligne de la fonction setAuthorState dans ManageAuthorPage. Indépendamment de cette ligne de code, même si je mets un fichier console.log (this.state.author) dans setAuthorState, il s’arrêtera sur le fichier console.log et affichera l’erreur.

Impossible de trouver le même problème pour quelqu'un d'autre sur Internet.

Voici le code ManageAuthorPage:

import React, { Component } from 'react';
import AuthorForm from './authorForm';

class ManageAuthorPage extends Component {
  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  setAuthorState(event) {
    let field = event.target.name;
    let value = event.target.value;
    this.state.author[field] = value;
    return this.setState({author: this.state.author});
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.setAuthorState}
      />
    );
  }
}

export default ManageAuthorPage

Et voici le code AuthorForm:

import React, { Component } from 'react';

class AuthorForm extends Component {
  render() {
    return (
      <form>
                <h1>Manage Author</h1>
        <label htmlFor="firstName">First Name</label>
                <input type="text"
                    name="firstName"
          className="form-control"
                    placeholder="First Name"
          ref="firstName"
          onChange={this.props.onChange}
                    value={this.props.author.firstName}
          />
        <br />

        <label htmlFor="lastName">Last Name</label>
                <input type="text"
                    name="lastName"
          className="form-control"
                    placeholder="Last Name"
          ref="lastName"
                    onChange={this.props.onChange}
          value={this.props.author.lastName}
                    />

                <input type="submit" value="Save" className="btn btn-default" />
            </form>
    );
  }
}

export default AuthorForm
javascriptreactjsecmascript-6ecmascript-7
35
Khpalwalk

Assurez-vous que vous appelez super() comme première chose dans votre constructeur!

Vous devez définir this pour la méthode setAuthorState

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  constructor(props) {
    super(props);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
  } 

  handleAuthorChange(event) {
    let {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}

Une autre alternative basée sur arrow function:

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  handleAuthorChange = (event) => {
    const {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}
32
Alexander T.

Vous devez lier vos gestionnaires d’événements pour corriger le contexte (this):

onChange={this.setAuthorState.bind(this)}
57
madox2