React setState callback not called for external (npm packaged) component - reactjs

Question

I am using setState with a callback to ensure things run after the state has been updated.
...
this.setState({enabled : true},this.getData);
}
getData () {
const self = this;
fetch(this.props.url,{
method : 'post',
body : this.state
}).then(function (response) {
return response.json();
}).then(function (result) {
self.update();
});
}
...
setState is getting called. this.state.enabled does change to true. However, this.getData is not getting called.
One thing I found interesting is that this is happening for a component I am using via an npm package. In my own code, setState with a callback works as designed.
The said external component is also packaged by me. I am using webpack to build it. Might there be something wrong with my webpack config?
Here it is:
const Webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
index : './src/index.js'
},
output: {
path: path.join(__dirname,'dist'),
filename: '[name].js',
library : 'TextField',
libraryTarget: 'umd'
},
externals : [
{
'react' : {
root : 'React',
commonjs2 : 'react',
commonjs : 'react',
amd : 'react'
}
}
],
module: {
loaders: [
{ test: /\.(js?)$/, exclude: /node_modules/, loader: require.resolve('babel-loader'), query: {cacheDirectory: true, presets: ['es2015', 'react', 'stage-2']} }
]
},
devtool : 'eval'
};
Edit:
So now I am pretty sure something fishy is going on when I use my component from a package vs, when I use it from my source.
When I call setState from a component which is part of my source-code, this is what is called:
ReactComponent.prototype.setState = function (partialState, callback) {
!(typeof partialState === 'object'
|| typeof partialState === 'function'
|| partialState == null) ?
process.env.NODE_ENV !== 'production' ?
invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.')
: _prodInvariant('85')
: void 0;
this.updater.enqueueSetState(this, partialState);
if (callback) {
this.updater.enqueueCallback(this, callback, 'setState');
}
};
The above is from a file named ReactBaseClasses.js
When I call setState from a component I packaged as an npm package, this is what is called:
Component.prototype.setState = function (partialState, callback) {
!(typeof partialState === 'object'
|| typeof partialState === 'function'
|| partialState == null) ?
invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.')
: void 0;
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
The above is from a file named react.development.js. Notice that callback is passed to enqueueSetState. Interestingly, when I break into enqueueSetState, the function does nothing with the callback:
enqueueSetState: function (publicInstance, partialState) {
if (process.env.NODE_ENV !== 'production') {
ReactInstrumentation.debugTool.onSetState();
process.env.NODE_ENV !== 'production' ? warning(partialState != null, 'setState(...): You passed an undefined or null state object; ' + 'instead, use forceUpdate().') : void 0;
}
var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
if (!internalInstance) {
return;
}
var queue = internalInstance._pendingStateQueue ||
(internalInstance._pendingStateQueue = []);
queue.push(partialState);
enqueueUpdate(internalInstance);
},

Answer 1

This could be a bug with React. Apparently it was a major bug fix to combine the enqueueSetState and enqueueCallback functionality, but these were separately functioning calls in earlier versions of React.
https://github.com/facebook/react/issues/8577
When importing npm modules, sometimes they bring in different versions of React as dependencies, creating these kinds of inconsistency bugs with setState and callbacks.
https://github.com/facebook/react/issues/10320

Answer 2

When you set your state, do it like this.
this.setState({enabled : true}, () => { this.getData() });
The () => {} bind this to it's lexical parent context.

Answer 3

You could (and maybe actually should) call the getData method from componentDidUpdate. It will also happen 100% after the state has been changed and (IMHO) will make your code a little less callback hellish.
Update following comments:
You can compare your previous state/props with the current ones in componentDidUpdate and then call your method if needed:
componentDidUpdate(prevProps, prevState) {
if (prevProps.something !== this.props.something) {
// do some magic
}
}

Answer 4

You mentioned the callback is being called successfully from handleLookupChange, correct?
So handleChange is successfully being called from handleLookupChange after the onEnter event is triggered and is successfully setting the value for state, correct? And that value for state is either
{displayText : self.props.dataSource[selectedIndex]}
or
{displayText : newValue}.
So here is one possibility.
I noticed handleLookupChange takes two values as arguments from onEnter rather than an event. It sounds like you said the onEnter event successfully delivers the two arguments to handleLookupChange and correctly sets state based on them. If not my guess would be handleLookupChange ought to take the event and process it to pass to handleChange.
Or another one.
If that transition is happening successfully, could this be an issue in how values are received from input after the onEnter event?
When you trigger handleLookupChange with onEnter, is that possible that hitting enter with no text in the input somehow returns newValue not as null but as the empty string? This would cause displayText to be set as newValue (as it is not null), thus causing displayText to be set as the empty string, causing the callback addItem's if statement never to trigger and run?
Have you checked that addItem for sure isn't being called above the if statement?
Another thing to check would be whether dataSource at selectedIndex might be picking up the empty string, which could trigger the if statement to not run the inside of addItem.