ES7 के साथ प्रतिक्रिया: Uncaught TypeError: अपरिभाषित

Question

मैं यह त्रुटि Uncaught TypeError हो रही है की संपत्ति 'राज्य' पढ़ा नहीं जा सकता: जब भी मैं AuthorForm के इनपुट बॉक्स में कुछ भी लिखने अपरिभाषित की संपत्ति 'राज्य' नहीं पढ़ सकता। मैं ES7 के साथ प्रतिक्रिया का उपयोग कर रहा हूँ।

त्रुटि पर प्रबंधित होता है ManageAuthorPage में setAuthorState फ़ंक्शन की तीसरी पंक्ति। कोड की उस पंक्ति के बावजूद अगर मैं setAuthorState में console.log (this.state.author) डालता हूं, तो यह console.log पर रुक जाएगा और त्रुटि को कॉल करेगा।

इंटरनेट पर किसी और के लिए समान समस्या नहीं मिल सकती है। यहाँ

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 

और AuthorForm कोड है::

यहाँ ManageAuthorPage कोड है

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

आप संदर्भ को दूर करने के अपने ईवेंट हैंडलर्स बाध्य करने के लिए है (this):

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

Answer 2

आप

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