Reageren met ES7: Uncaught TypeError: Kan eigenschap ‘state’ van undefined niet lezen

Ik krijg deze fout Uncaught TypeError: Kan eigenschap ‘state’ of undefinedniet lezen wanneer ik iets typ in het invoervak van AuthorForm. Ik gebruik React met ES7.

De fout doet zich voor op derde regel van de setAuthorState-functie in ManageAuthorPage. Ongeacht die regel code, zelfs als ik een console.log(this.state.author) in setAuthorState plaats, zal het stoppen bij de console.log en de fout oproepen.

Kan op internet geen soortgelijk probleem voor iemand anders vinden.

Hier is de 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 

En hier is de 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

Antwoord 1, Autoriteit 100%

Zorg ervoor dat u super()als eerste in uw constructor belt.

U dient thisvoor te stellen voor setAuthorStateMETHODE

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}
      />
    );
  }
}

Nog een alternatief op basis van 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}
      />
    );
  }
}

Antwoord 2, autoriteit 93%

Je moet je event handlers binden aan de juiste context (this):

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