reagują z ES7: Uncaught TypeError: nie można odczytać właściwość „państwowego” undefined

Question

dostaję ten błąd Uncaught TypeError: nie można odczytać właściwość „państwowego” undefined ilekroć wpisać cokolwiek w polu wejściowym AuthorForm. Używam React with ES7.

Błąd występuje na 3. linii funkcji setAuthorState w ManageAuthorPage. Niezależnie od tego wiersza kodu, nawet jeśli wstawię plik console.log (this.state.author) do setAuthorState, zatrzyma się on na console.log i wywoła błąd.

Nie można znaleźć podobnego problemu dla kogoś innego przez Internet.

Oto ManageAuthorPage kod:

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 

A oto AuthorForm kod:

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

Trzeba powiązać obsługi zdarzeń w celu skorygowania kontekst (this):

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

Answer 2

Należy ustawić this dla setAuthorState metody

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