read - saber si un objeto esta vacio javascript

Reaccionar: TypeError no capturado: no se puede leer la propiedad ''setState'' de undefined

Question

Estoy teniendo el siguiente error

TypeError no capturado: no se puede leer la propiedad ''setState'' de undefined

incluso después de enlazar delta en el constructor.

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta.bind(this);
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}

Answer 1

1. Verificar estado verificar estado si creas una propiedad particular o no

this.delta = this.delta.bind(this); 

2. Verifique (esto) si está haciendo setState dentro de cualquier función (es decir, handleChange) verifique si la función se une a esto o si la función debería ser una función de flecha.

## 3 formas de vincular esto a la siguiente función ##

this.delta.bind(this);

Answer 2

Agregando

onClick = {this.delta.bind (this)}

Resolverá el problema. Este error se produce cuando intentamos llamar a la función de la clase ES6, por lo que debemos vincular el método.

Answer 3

Aunque esta pregunta ya tenía una solución, solo quiero compartir la mía para aclararla, espero que pueda ayudar:

 delta = () => {
this.setState({
count : this.state.count++
});
}

Answer 4

Cuando use el código ES6 en React, siempre use las funciones de flecha, porque este contexto se vincula automáticamente con él

Utilizar esta:

(videos) => {
this.setState({ videos: videos });
console.log(this.state.videos);
};

en vez de:

function(videos) {
this.setState({ videos: videos });
console.log(this.state.videos);
};

Answer 5

Debe vincular esto al constructor y recordar que los cambios en el constructor deben reiniciar el servidor. O bien, terminará con el mismo error.

Answer 6

Debe vincular sus métodos con ''this'' (objeto predeterminado). Entonces, cualquiera que sea su función, solo agréguela al constructor.

constructor(props) {
super(props);
this.state = { checked:false };
this.handleChecked = this.handleChecked.bind(this);
}
handleChecked(){
this.setState({
checked: !(this.state.checked)
})
}
render(){
var msg;
if(this.state.checked){
msg = ''checked''
}
else{
msg = ''not checked''
}
return (
<div>
<input type=''checkbox'' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
<h3>This is {msg}</h3>
</div>
);

Answer 7

En ES7 + (ES2016) puede usar la función experimental bind syntax operator :: to bind. Es un azúcar sintáctico y hará lo mismo que la respuesta de Davin Tryon.

Luego puede reescribir this.delta = this.delta.bind(this); a this.delta = ::this.delta;

Para ES6 + (ES2015) también puede usar la función de flecha ES6 + ( => ) para poder usar this .

delta = () => {
this.setState({
count : this.state.count + 1
});
}

Por qué ? Del documento de Mozilla:

Hasta que la flecha funciona, cada nueva función define su propio valor [...]. Esto resultó ser molesto con un estilo de programación orientado a objetos.

Las funciones de flecha capturan el valor de este del contexto [...]

Answer 8

Este error puede resolverse por varios métodos:

• Si está utilizando la sintaxis de ES5 , entonces, según la documentación de React js , debe utilizar el método de enlace .

  Algo como esto para el ejemplo anterior:

  this.delta = this.delta.bind(this)

• Si está utilizando la sintaxis de ES6 , entonces no necesita utilizar el método de enlace , puede hacerlo con algo como esto:

  delta=()=>{ this.setState({ count : this.state.count++ }); }

Answer 9

Esto se debe a que this.delta no está vinculado a this .

Para enlazar, configure this.delta = this.delta.bind(this) en el constructor:

constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}

Actualmente, estás llamando a Bind. Pero bind devuelve una función enlazada. Debe establecer la función en su valor límite.

Answer 10

Hay dos soluciones a este problema:

La primera solución es agregar un constructor a su componente y vincular su función como se muestra a continuación:

/*
* The root cause is method doesn''t in the App''s context
* so that it can''t access other attributes of "this".
* Below are few ways to define App''s method property
*/
class App extends React.Component {
constructor() {
this.sayHi = ''hello'';
// create method inside constructor, context = this
this.method = ()=> { console.log(this.sayHi) };
// bind method1 in constructor into context ''this''
this.method1 = this.method.bind(this)
}
// method1 was defined here
method1() {
console.log(this.sayHi);
}
// create method property by arrow function. I recommend this.
method2 = () => {
console.log(this.sayHi);
}
render() {
//....
}
}

Entonces haz esto:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component{
constructor(props){
super(props);
this.state = {
counter : 0,
isToggle: false
}
this.onEventHandler = this.onEventHandler.bind(this);
}
increment = ()=>{
this.setState({counter:this.state.counter + 1});
}
decrement= ()=>{
if(this.state.counter > 0 ){
this.setState({counter:this.state.counter - 1});
}else{
this.setState({counter:0});
}
}
// Either do it as onEventHandler = () => {} with binding with this // object.
onEventHandler(){
this.setState({isToggle:!this.state.isToggle})
alert(''Hello'');
}
render(){
return(
<div>
<button onClick={this.increment}> Increment </button>
<button onClick={this.decrement}> Decrement </button>
{this.state.counter}
<button onClick={this.onEventHandler}> {this.state.isToggle ? ''Hi'':''Ajay''} </button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById(''root''),
);
</script>
</body>
</html>

En lugar de esto:

this.state = {
name: "",
email: ""
}
this.setState(() => ({
comments: comments //comments not available in state
})) 

La segunda solución es usar una función de flecha en su lugar:

//3 ways for binding this to the below function
handleNameChange(e) {
this.setState(() => ({ name }))
}
// 1.Bind while callling function
onChange={this.handleNameChange.bind(this)}
//2.make it as arrow function
handleNameChange((e)=> {
this.setState(() => ({ name }))
})
//3.Bind in constuctor
constructor(props) {
super(props)
this.state = {
name: "",
email: ""
}
this.handleNameChange = this.handleNameChange.bind(this)
}

En realidad, la función de flecha NO se vincula a this . Las funciones de flecha bind léxicamente su contexto, por this realidad se refiere al contexto de origen .

Para más información sobre la función de enlace:

Función de vinculación Comprensión de JavaScript Bind ()

Para más información sobre la función de flecha:

hackernoon.com/…

Answer 11

Hay una diferencia de contexto entre las clases ES5 y ES6. Por lo tanto, también habrá una pequeña diferencia entre las implementaciones.

Aquí está la versión ES5:

var Counter = React.createClass({
getInitialState: function() { return { count : 1 }; },
delta: function() {
this.setState({
count : this.state.count++
});
},
render: function() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
});

y aquí está la versión ES6:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count : 1 };
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta.bind(this)}>+</button>
</div>
);
}
}

Solo tenga cuidado, además de la diferencia de sintaxis en la implementación de la clase, hay una diferencia en el enlace del controlador de eventos.

En la versión ES5, es

 <button onClick={this.delta}>+</button>

En la versión ES6, es:

 <button onClick={this.delta.bind(this)}>+</button>

Answer 12

La función de flecha podría haber hecho su vida más fácil para evitar vincular esta palabra clave. Al igual que:

delta = () => {
this.setState({
count : this.state.count++
});
}

Answer 13

No tiene que vincular nada, solo use las funciones de flecha como esta:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 1
};
}
//ARROW FUNCTION
delta = () => {
this.setState({
count: this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}

Answer 14

Simplemente cambie su declaración de enlace de lo que tiene que => this.delta = this.delta.bind (this);

Answer 15

También puedes usar:

<button onClick={()=>this.delta()}>+</button>

O:

<button onClick={event=>this.delta(event)}>+</button>

Si estás pasando algunos params ...

Answer 16

tienes que vincular un nuevo evento con esta palabra clave como menciono a continuación ...

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta = this.delta.bind(this);
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}

Answer 17

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