reagire con ES7: TypeError Uncaught: Impossibile leggere la proprietà 'stato' undefined

Question

che sto ricevendo questo errore TypeError Uncaught: Impossibile leggere la proprietà 'stato' undefined ogni volta che digitare nulla nella casella di immissione di AuthorForm. Sto usando React con ES7.

L'errore si verifica su 3a riga della funzione setAuthorState in ManageAuthorPage. Indipendentemente da quella riga di codice, anche se inserisco console.log (this.state.author) in setAuthorState, si fermerà su console.log e richiamerà l'errore.

Impossibile trovare il problema simile per qualcun altro su Internet.

Ecco il codice 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 

E qui è il codice 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 

Answer 1

Bisogna collegare i gestori di eventi per correggere contesto (this):

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

Answer 2

È necessario impostare this per setAuthorState metodo

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