Me he encontrado con un problema muy extraño. Tengo una función que se usa como devolución de llamada para un eventListener. Esta devolución de llamada tiene una llamada setState dentro.

Lo extraño es que si paso la función como accesorio a otro componente y la llamo en el controlador onClick , la llamada setState se ejecuta y su devolución de llamada se imprime en la consola.

Cuando lo estoy usando como devolución de llamada al eventListener, en el evento que se activa, la función se ejecuta, ¡pero el setState dentro no se ejecuta!

No se lanza ningún error o advertencia en la consola.

Código:

Utils.js

 import { EventEmitter } from 'fbemitter'; const emitter = new EventEmitter();

ArchivoActual.jsx

 import { emitter } from './Utils'; class ComponentWithListener extends React.Component { state = { selections: this.props.selections }; componentDidMount() { emitter.addListener('resetSelections', () => this.resetSelections()); } componentWillUnMount() { emitter.removeAllListeners('resetSelections'); } resetSelections = () => { console.log('resetSelections() called'); this.setState({ selections: this.props.initialSelections }, () => { console.log('successfully reset selections'); someFunctionCall(); }); } }

OtroArchivo.jsx

 import { emitter } from './Utils'; class OtherFile extends React.Component { // ..state declaration and other functions resetStoredFilters = () => { // do some things emitter.emit('resetSelections'); } // other functions and render() }

Así que aquí, cada vez que se resetStoredFilter() , el setState dentro resetSelections() no se ejecuta, y el resultado que obtengo en la consola para resetSelections() es:

 resetSelections() called

someFunctionCall() .

Compare esto con cuando paso resetSelections como accesorio a un componente secundario y lo llamo desde dentro de un controlador onClick desde dentro del componente secundario:

 // body of some function inside child component onClick={resetSelections}

Cuando se hace clic en este elemento dentro del componente secundario, el resultado que obtengo en la consola para resetSelection() es:

 resetSelections() called successfully reset selections

someFunctionCall() no se ejecuta.

Incluso intenté usar componentes funcionales y useState hook en CurrentFile.jsx para verificar si eso marca la diferencia. Veo el mismo problema todavía.

¿Por qué pasó esto? ¿Y cómo hacer que setState se ejecute en las devoluciones de llamada de eventListener?