Reagieren mit ES7: Uncaught Typeerror: kann nicht lesen Eigenschaft ‚Zustand‘ undefinierten

Question

Ich Uncaught Typeerror diesen Fehler: nicht Eigenschaft ‚Zustand‘ undefinierter lesen kann, wenn ich irgendetwas in dem Eingabefeld von AuthorForm eingeben. Ich verwende React mit ES7. Der Fehler tritt bei 3. Zeile der SetAuthorState-Funktion in ManageAuthorPage auf Unabhängig von dieser Codezeile, auch wenn ich eine console.log (this.state.author) in setAuthorState setze, wird es bei der console.log stoppen und den Fehler aufrufen.

Kein ähnliches Problem für jemand anderes über das Internet finden. Hier

ist die ManageAuthorPage Code:

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 

Und hier ist der 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 

Answer 1

Sie haben Ihre Event-Handler zu binden Kontext zu korrigieren (this):

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

Answer 2

Sie sollten this für setAuthorState Methode

class ManageAuthorPage extends Component { 

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

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

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