React with ES7: Uncaught TypeError: Die Eigenschaft 'state' von undefined [duplicate] kann nicht gelesen werden

Diese Frage hat hier bereits eine Antwort:

Zugriff auf die React-Instanz (this) in der Ereignisbehandlungsroutine nicht möglich 16 Antworten

Ich erhalte diesen FehlerUncaught TypeError: Die Eigenschaft 'state' von undefined @ kann nicht gelesen werd, wenn ich etwas in das Eingabefeld von AuthorForm eingebe. Ich verwende React mit ES7.

Der Fehler tritt am @ a 3. Zeile der setAuthorState-Funktion in ManageAuthorPage. Unabhängig von dieser Codezeile wird in setAuthorState ein console.log (this.state.author) abgelegt, bei console.log angehalten und der Fehler ausgegeben.

Ich kann ein ähnliches Problem nicht über das Internet für einen anderen Benutzer finden.

Hier ist das ManageAuthorPage code:

import React, { Component } from 're,act';
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 

nd hier ist das AuthorForm code:

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

Antworten auf die Frage(4)

Ihre Antwort auf die Frage