Cannot Read Property 'state' of Undefined Vuex

The outcome Cannot read the belongings of undefined is quite common in JavaScript. When the variable is not divers, JavaScript can non read the undefined variable or property. A similar issue we tin can find in React JS. We analyze the issue and try to find a solution.

TypeError: Cannot read belongings 'state' of undefined

            import React from 'react'; import * as courseActions from '../Redux/actions/courseAction'; import propTypes from 'prop-types'; import { connect } from 'react-redux'; course CoursePage extends React.Component {   state = {     course: {       title: '',     },   };    handlechange  (event) {     const form = { ...this.state.course, title: effect.target.value };     this.setState({ course });   };    handleSubmit(outcome) {     event.preventDefault();     this.props.dispatch(courseActions.createCourse(this.land.course));   };   render() {     render (       <course onSubmit={this.handleSubmit}>         <h2>courses</h2>         <h3>Add course</h3>         <input           type='text'           onChange={this.handlechange}           value={this.state.course.title}         />         <input blazon='submit' value='relieve' />       </form>     );   } }                      

Solution

The event here is not nosotros what wait i.east. 'Cannot read property 'state' of undefined', In that location are 3 approaches in context binding in react.

                      handlechange() {     const course = { …this.state.course, title: event.target.value };      this.setState({ course }); }        

Approach 1: Demark 'this' context to ain instance – Less preferred

            course CoursePage extends React.Component {   land = {     grade: {       championship: '',     },    }; handlechange() {     const class = { …this.land.course, championship: event.target.value };      this.setState({ grade }); } return(){     return (       <form> 			<h2>courses</h2> 			<h3>Add course</h3> 			<input 			type='text' 			onChange={this.handlechange.demark(this)} 			value={this.land.course.championship} 			/> 			<input type='submit' value='save' /> 	  </course>  		);   } }                      

This works, considering now this context bound to our class context, i.eastward {this.handlechange.bind(this)} to the onChange event, but Information technology volition crusade to create an in-role unnecessarily on each render…

Arroyo ii : Bounden in the Constructor – Less preferred than Pointer function

The most common approach will be to do it in theconstructor because it runs but once, now the part is bound merely once, this is called context-binding in the constructor, this approach is preferable, won't be reallocated on each render

            class CoursePage extends React.Component {   constructor(props) {     super(props);     this.state = {       course: {         title: "",       },     };     //binding in constuctor      this.handlechange= this.handlechange.demark(this);   };  handlechange() {     const course = { …this.land.form, championship: event.target.value };      this.setState({ course }); } render (       <form> 			<h2>courses</h2> 			<h3>Add course</h3> 			<input 			type='text' 			onChange={this.handlechange} 			value={this.state.grade.title} 			/> 			<input blazon='submit' value='save' /> 	  </form>  		);   } }                      

performance wise it is better to bind in the constructor. The bind in constructor method volition create a unmarried instance of the office and re-use it, even if the return method is called multiple times

Approach 3: Arrow functions – More than preferred

Inherit the bounden context of their enclosing scope. basically, they don't have 'this' bounden, 'this' keyword inside references the class instance.

            class CoursePage extends React.Component {   state = { form: { title: '' } };   handlechange = (event) => {     const course = { ...this.country.grade, title: event.target.value };     this.setState({ course });   };   render() {     return (       <form>         <h2>courses</h2>         <h3>Add together form</h3>         <input           type='text'           onChange={this.handlechange}           value={this.country.grade.title}         />         <input type='submit' value='salvage' />       </grade>     );   }          

Tip: How the Arrow role preferred in react state to achieve context binding?

Pointer functions are keen. They practice look nicer, Only there is a much better reason to use arrow functions.  It would exist more than efficient if nosotros know, when and where y'all are using it.

          handlechange = (effect) => {     const course = { ...this.country.course, title: event.target.value };     this.setState({ course });   };                  

In above case, the arrow function does not recreate function on each render, Similar to how bounden in the constructor works in 2nd approach.

woodsonsgived.blogspot.com

Source: https://techstrology.com/cannot-read-property-state-of-undefined-reactjs/

Share this post