Estoy escribiendo un componente simple en ES6 (con BabelJS) y las funciones this.setStateno funcionan.

Los errores típicos incluyen algo como

No se puede leer la propiedad 'setState' de undefined

o

this.setState no es una función

¿Sabes por qué? Aquí está el código:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

this.changeContentdebe estar vinculado a la instancia del componente a través de this.changeContent.bind(this)antes de pasar como onChangeprop, de lo contrario, la thisvariable en el cuerpo de la función no se referirá a la instancia del componente sino a window. Ver Función :: vincular .

Cuando se usa en React.createClasslugar de las clases ES6, cada método que no sea del ciclo de vida definido en un componente se vincula automáticamente a la instancia del componente. Consulte Autoencuadernación .

Tenga en cuenta que vincular una función crea una nueva función. Puede vincularlo directamente en el render, lo que significa que se creará una nueva función cada vez que el componente se renderice, o vincularlo en su constructor, que solo se activará una vez.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

vs

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

Las referencias se establecen en la instancia del componente y no en React.refs: debe cambiar React.refs.somerefa this.refs.someref. También deberá vincular el sendContentmétodo a la instancia del componente para que se thisrefiera a él.

Morhaus tiene razón, pero esto se puede resolver sin bind.

Puede utilizar una función de flecha junto con la propuesta de propiedades de clase :

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

Debido a que la función de flecha se declara en el alcance del constructor, y debido a que las funciones de flecha mantienen thisdesde su alcance de declaración, todo funciona. La desventaja aquí es que estas no serán funciones en el prototipo, todas serán recreadas con cada componente. Sin embargo, esto no es una gran desventaja ya que bindresulta en lo mismo.

Este problema es una de las primeras cosas que la mayoría de nosotros experimentamos al pasar de la React.createClass()sintaxis de definición de componentes a la forma de extensión de la clase ES6 React.Component.

Es causada por las thisdiferencias de contexto en React.createClass()contraextends React.Component .

El uso React.createClass()vinculará automáticamente el thiscontexto (valores) correctamente, pero ese no es el caso cuando se usan las clases de ES6. Al hacerlo de la manera ES6 (extendiendo React.Component) el thiscontexto es nullpor defecto. Las propiedades de la clase no se vinculan automáticamente a la instancia de la clase React (componente).

Enfoques para resolver este problema

Conozco un total de 4 enfoques generales.

1. Vincula tus funciones en el constructor de clases . Considerado por muchos como un enfoque de mejores prácticas que evita tocar JSX en absoluto y no crea una nueva función en cada repetición de componente.

   class SomeClass extends React.Component {
     constructor(props) {
       super(props);
       this.handleClick = this.handleClick.bind(this);
     }
     handleClick() {
       console.log(this); // the React Component instance
     }
     render() {
       return (
         <button onClick={this.handleClick}></button>
       );
     }
   }
   

2. Vincula tus funciones en línea . Todavía puede encontrar este enfoque utilizado aquí y allá en algunos tutoriales / artículos / etc., por lo que es importante que lo sepa. Es el mismo concepto que el # 1, pero tenga en cuenta que vincular una función crea una nueva función por cada re-renderización.

   class SomeClass extends React.Component {
     handleClick() {
       console.log(this); // the React Component instance
     }
     render() {
       return (
         <button onClick={this.handleClick.bind(this)}></button>
       );
     }
   }
   

3. Utilice una función de flecha gruesa . Hasta que funciona la flecha, cada nueva función define su propio thisvalor. Sin embargo, la función de flecha no crea su propio thiscontexto, por lo que thistiene el significado original de la instancia del componente React. Por tanto, podemos:

   class SomeClass extends React.Component {
     handleClick() {
       console.log(this); // the React Component instance
     }
     render() {
       return (
         <button onClick={ () => this.handleClick() }></button>
       );
     }
   }
   

   o

   class SomeClass extends React.Component {
     handleClick = () => {
       console.log(this); // the React Component instance
     }
     render() {
       return (
         <button onClick={this.handleClick}></button>
       );
     }
   }
   

4. Utilice la biblioteca de funciones de utilidad para vincular automáticamente sus funciones . Existen algunas bibliotecas de utilidades que automáticamente hacen el trabajo por usted. Éstos son algunos de los más populares, solo por mencionar algunos:

   • Autobind Decorator es un paquete de NPM que vincula métodos de una clase a la instancia correcta de this, incluso cuando los métodos están separados. El paquete usa @autobindmétodos before para enlazar thiscon la referencia correcta al contexto del componente.

     import autobind from 'autobind-decorator';
     
     class SomeClass extends React.Component {
       @autobind
       handleClick() {
         console.log(this); // the React Component instance
       }
       render() {
         return (
           <button onClick={this.handleClick}></button>
         );
       }
     }
     

     Autobind Decorator es lo suficientemente inteligente como para permitirnos vincular todos los métodos dentro de una clase de componente a la vez, al igual que el enfoque n. ° 1.

   • Class Autobind es otro paquete de NPM que se usa ampliamente para resolver este problema de vinculación. A diferencia de Autobind Decorator, no usa el patrón del decorador, sino que en realidad solo usa una función dentro de su constructor que vincula automáticamente los métodos del Componente a la referencia correcta de this.

     import autobind from 'class-autobind';
     
     class SomeClass extends React.Component {
       constructor() {
         autobind(this);
         // or if you want to bind only only select functions:
         // autobind(this, 'handleClick');
       }
       handleClick() {
         console.log(this); // the React Component instance
       }
       render() {
         return (
           <button onClick={this.handleClick}></button>
         );
       }
     }
     

     PD: Otra biblioteca muy similar es React Autobind .

Recomendación

Si yo fuera usted, me quedaría con el enfoque n. ° 1. Sin embargo, tan pronto como obtenga una tonelada de enlaces en el constructor de su clase, le recomendaría que explore una de las bibliotecas auxiliares mencionadas en el enfoque n. ° 4.

Otro

No está relacionado con el problema que tiene, pero no debe abusar de los rechazos .

Su primera inclinación puede ser utilizar referencias para "hacer que las cosas sucedan" en su aplicación. Si este es el caso, tómese un momento y piense de manera más crítica acerca de dónde debería pertenecer el estado en la jerarquía de componentes.

Para propósitos similares, al igual que el que necesita, utilizar un componente controlado es la forma preferida. Le sugiero que considere usar su Componentestate . Por lo tanto, sólo tiene que acceder al valor de la siguiente manera: this.state.inputContent.

Aunque las respuestas anteriores han proporcionado una descripción general básica de las soluciones (es decir, vinculación, funciones de flecha, decoradores que hacen esto por usted), todavía tengo que encontrar una respuesta que realmente explique por qué es necesario, que en mi opinión es la raíz de confusión, y conduce a pasos innecesarios como volver a unirse y seguir ciegamente lo que hacen los demás.

this es dinámico

Para comprender esta situación específica, una breve introducción a cómo thisfunciona. La clave aquí es que thises un enlace en tiempo de ejecución y depende del contexto de ejecución actual. Por lo tanto, la razón por la que se lo conoce comúnmente como "contexto", es decir, proporcionar información sobre el contexto de ejecución actual, y la razón por la que necesita vincular es porque pierde "contexto". Pero permítanme ilustrar el problema con un fragmento:

const foobar = {
  bar: function () {
    return this.foo;
  },
  foo: 3,
};
console.log(foobar.bar()); // 3, all is good!

En este ejemplo, obtenemos 3, como se esperaba. Pero tome este ejemplo:

const barFunc = foobar.bar;
console.log(barFunc()); // Uh oh, undefined!

Puede ser inesperado descubrir que se registra sin definir: ¿adónde se fue 3? La respuesta está en el "contexto" o en cómo se ejecuta una función. Compare cómo llamamos a las funciones:

// Example 1
foobar.bar();
// Example 2
const barFunc = foobar.bar;
barFunc();

Note la diferencia. En el primer ejemplo, estamos especificando exactamente dónde se ubica el barmétodo ¹ , en el foobarobjeto:

foobar.bar();
^^^^^^

Pero en el segundo, almacenamos el método en una nueva variable y usamos esa variable para llamar al método, sin indicar explícitamente dónde existe realmente el método, perdiendo así contexto :

barFunc(); // Which object is this function coming from?

Y ahí radica el problema, cuando almacena un método en una variable, se pierde la información original sobre dónde se encuentra ese método (el contexto en el que se está ejecutando el método). Sin esta información, en tiempo de ejecución, no hay forma de que el intérprete de JavaScript vincule lo correcto; thissin un contexto específico, thisno funciona como se esperaba ² .

Relacionado con React

Aquí hay un ejemplo de un componente de React (abreviado por brevedad) que sufre el thisproblema:

handleClick() {
  this.setState(({ clicks }) => ({ // setState is async, use callback to access previous state
    clicks: clicks + 1, // increase by 1
  }));
}

render() {
  return (
    <button onClick={this.handleClick}>{this.state.clicks}</button>
  );
}

Pero, ¿por qué y cómo se relaciona la sección anterior con esto? Esto se debe a que padecen una abstracción del mismo problema. Si echa un vistazo a cómo React maneja los controladores de eventos :

// Edited to fit answer, React performs other checks internally
// props is the current React component's props, registrationName is the name of the event handle prop, i.e "onClick"
let listener = props[registrationName];
// Later, listener is called

Entonces, cuando lo haga onClick={this.handleClick}, el método this.handleClickfinalmente se asignará a la variable listener³ . Pero ahora ve que surge el problema: desde que asignamos this.handleClicka listener, ¡ya no especificamos exactamente de dónde handleClickviene! Desde el punto de vista de React, listeneres solo una función, no adjunta a ningún objeto (o en este caso, la instancia del componente React). Hemos perdido contexto y, por lo tanto, el intérprete no puede inferir un thisvalor para usar dentro handleClick .

Por que funciona la encuadernación

Quizás se pregunte, si el intérprete decide el thisvalor en tiempo de ejecución, ¿por qué puedo vincular el controlador para que funcione ? Esto se debe a que puede utilizar Function#bindpara garantizar el thisvalor en tiempo de ejecución. Esto se hace estableciendo una thispropiedad de enlace interno en una función, lo que le permite no inferir this:

this.handleClick = this.handleClick.bind(this);

Cuando se ejecuta esta línea, presumiblemente en el constructor, se captura la corrientethis (la instancia del componente React) y se establece como un thisenlace interno de una función completamente nueva, devuelta desde Function#bind. Esto asegura que cuando thisse calcule en tiempo de ejecución, el intérprete no intentará inferir nada, sino que utilizará el thisvalor proporcionado que le dio.

Por que funcionan las propiedades de la función de flecha

Las propiedades de la clase de función Arrow actualmente funcionan a través de Babel según la transpilación:

handleClick = () => { /* Can use this just fine here */ }

Se convierte en:

constructor() {
  super();
  this.handleClick = () => {}
}

Y esto funciona debido al hecho de que las funciones de flecha no vinculan su propio this, sino que toman el thisde su alcance adjunto. En este caso, el constructor's this, que apunta a la instancia del componente React, lo que le da la correcta this. ⁴

¹ Utilizo "método" para referirme a una función que se supone que está vinculada a un objeto, y "función" para aquellas que no.

² En el segundo fragmento, se registra undefined en lugar de 3 porque se establece de forma thispredeterminada en el contexto de ejecución global ( windowcuando no está en modo estricto, o de lo contrario undefined) cuando no se puede determinar mediante un contexto específico. Y en el ejemplo window.foono existe por lo que cede indefinido.

³ Si desciende por la madriguera de cómo se ejecutan los eventos en la cola de eventos, invokeGuardedCallbackse llama al oyente.

⁴ En realidad, es mucho más complicado . React internamente intenta usarlo Function#applyen oyentes para su propio uso, pero esto no funciona con las funciones de flecha ya que simplemente no se vinculan this. Eso significa que, cuando thisse evalúa realmente la función dentro de la flecha, thisse resuelve cada entorno léxico de cada contexto de ejecución del código actual del módulo. El contexto de ejecución que finalmente se resuelve para tener un thisenlace es el constructor, que thisapunta a la instancia actual del componente React, lo que le permite funcionar.

Puede abordar esto de tres maneras

1.Enlace la función de evento en el propio constructor de la siguiente manera

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

2.Enlazar cuando se llame

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent.bind(this)}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

3 mediante el uso de funciones de flecha

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={()=>this.sendContent()}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

Necesitamos vincular la función de evento con el componente en el constructor de la siguiente manera,

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

Gracias

Mi recomendación es utilizar funciones de flecha como propiedades.

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

y no utilice las funciones de flecha como

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

debido a que el segundo enfoque generará una nueva función en cada llamada de renderizado, de hecho, esto significa un nuevo puntero, una nueva versión de los accesorios, que si luego se preocupa por el rendimiento, puede usar React.PureComponent o en React.Component puede anular shouldComponentUpdate (nextProps, nextState) y cheque superficial cuando llegaron los accesorios

Puedes resolver esto siguiendo estos pasos

Cambiar la función sendContent con

 sendContent(e) {
    console.log('sending input content '+this.refs.someref.value)
  }

Cambiar la función de renderizado con

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>

Tenemos que bindnuestra función con thispara obtener una instancia de la función en la clase. Como en el ejemplo

<button onClick={this.sendContent.bind(this)}>Submit</button>

De esta forma this.stateserá objeto válido.

si alguien alguna vez llegará a esta respuesta, aquí hay una forma de vincular todas las funciones sin necesidad de vincularlas manualmente

en el constructor ():

for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
    this[member] = this[member].bind(this)
}

o cree esta función en un archivo global.jsx

export function bindAllFunctions({ bindTo: dis }) {
for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(dis))) {
    dis[member] = dis[member].bind(dis)
    }
}

y en tu constructor () llámalo como:

bindAllFunctions({ bindTo: this })

Este problema ocurre porque this.changeContenty onClick={this.sendContent}no están vinculados a esto de la instancia del componente.

Hay otra solución (además de usar bind () en el constructor ()) para usar las funciones de flecha de ES6 que comparten el mismo alcance léxico del código circundante y mantienen esto , por lo que puede cambiar su código en render () a ser:

render() {
    return (

        <input type="text"
          onChange={ () => this.changeContent() } /> 

        <button onClick={ () => this.sendContent() }>Submit</button>

    )
  }

Hola, si no quieres preocuparte por vincularte tu llamada de función. Puede usar 'class-autobind' e importarlo así

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

No escriba autobind antes de la super llamada porque no funcionará

En caso de que desee mantener el enlace en la sintaxis del constructor, puede usar el operador de enlace de propuesta y transformar su código como sigue:

constructor() {
  this.changeContent = ::this.changeContent;
}

En lugar de :

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

mucho más simple, sin necesidad de bind(this)o fatArrow.

este problema ocurre después de react15.0, cuyo controlador de eventos no se vinculó automáticamente al componente. por lo que debe vincular esto al componente manualmente siempre que se llame al controlador de eventos.

hay varios métodos para resolver el problema. pero necesita saber qué método es mejor y por qué? En general, recomendamos vincular sus funciones en el constructor de clases o usar una función de flecha.

// method 1： use a arrow function
    class ComponentA extends React.Component {
      eventHandler = () => {
        console.log(this)
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

// method 2: Bind your functions in the class constructor.
    class ComponentA extends React.Component {
      constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

estos dos métodos no crearán una nueva función cuando el componente se procese cada vez. por lo que nuestro ChildComponent no se volverá a reproducir debido al cambio de accesorios de la nueva función, o puede producir el problema de rendimiento.

Está utilizando ES6, por lo que las funciones no se vincularán a "este" contexto automáticamente. Tienes que vincular manualmente la función al contexto.

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

Sus funciones deben vincularse para jugar con el estado o los accesorios en los controladores de eventos

En ES5, vincule las funciones de su controlador de eventos solo en el constructor, pero no lo haga directamente en el render. Si enlaza directamente en el render, crea una nueva función cada vez que su componente se renderiza y se vuelve a renderizar. Así que siempre deberías vincularlo en el constructor.

this.sendContent = this.sendContent.bind(this)

En ES6, use las funciones de flecha

Cuando usa las funciones de flecha, entonces no necesita hacer un enlace y también puede mantenerse alejado de los problemas relacionados con el alcance

sendContent = (event) => {

}

Alexandre Kirszenberg tiene razón, pero otra cosa importante a la que debe prestar atención es dónde coloca la encuadernación. He estado atrapado en una situación durante días (probablemente porque soy un principiante), pero a diferencia de otros, sabía sobre bind (que ya había aplicado), así que no podía entender por qué seguía teniendo esos errores. Resulta que tenía el enlace en el orden incorrecto.

Otro es quizás el hecho de que estaba llamando a la función dentro de "this.state", que no era consciente del enlace porque estaba por encima de la línea de enlace,

A continuación se muestra lo que tenía (por cierto, esta es mi primera publicación, pero pensé que era muy importante, ya que no pude encontrar una solución en ningún otro lugar):

constructor(props){
    super(props);

       productArray=//some array

    this.state={ 
        // Create an Array  which will hold components to be displayed
        proListing:productArray.map(product=>{return(<ProRow dele={this.this.popRow()} prodName={product.name} prodPrice={product.price}/>)})
    }

    this.popRow=this.popRow.bind(this);//This was the Issue, This line //should be kept above "this.state"

Solución:

1. Sin vinculación explícita, bindcon el nombre del método puede usar la sintaxis de funciones de flecha gruesa () => {} que mantiene el contexto de this.

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputContent: 'startValue'
    }
  }

  sendContent = (e) => {
    console.log('sending input content ',this.state.inputContent);
  }

  changeContent = (e) => {
    this.setState({inputContent: e.target.value},()=>{
      console.log('STATE:',this.state);
    })
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" value={this.state.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

Otras soluciones:

1. Vincula tus funciones en el constructor de clases.

2. Vincula tus funciones en las llaves de escape de la plantilla JSX {} {this.methodName.bind (this)}

bind(this)puede solucionar este problema, y ​​hoy en día podemos usar otras 2 formas de lograrlo si no le gusta usar bind.

1) Como de la forma tradicional, podemos usar bind(this)en el constructor, de modo que cuando usamos la función como devolución de llamada JSX, el contexto de thises la clase misma.

class App1 extends React.Component {
  constructor(props) {
    super(props);
    // If we comment out the following line,
    // we will get run time error said `this` is undefined.
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor(e) {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button</button>
      </div>
    );
  }
}

2) Si definimos la función como un atributo / campo de la clase con función de flecha, no necesitamos usar bind(this)más.

class App2 extends React.Component {
  changeColor = e => {
    e.currentTarget.style.backgroundColor = "#00FF00";
    console.log(this.props);
  };
  render() {
    return (
      <div>
        <button onClick={this.changeColor}> button 1</button>
      </div>
    );
  }
}

3) Si usamos la función de flecha como devolución de llamada JSX, no es necesario que usemos bind(this)tampoco. Y además, podemos pasar los parámetros. Se ve bien, ¿no? pero su inconveniente es la preocupación por el rendimiento, para obtener más detalles, consulte el documento ReactJS .

class App3 extends React.Component {
  changeColor(e, colorHex) {
    e.currentTarget.style.backgroundColor = colorHex;
    console.log(this.props);
  }
  render() {
    return (
      <div>
        <button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
      </div>
    );
  }
}

Y he creado un Codepen para hacer una demostración de estos fragmentos de código, espero que ayude.