我正在使用setState
回调来确保在状态更新后运行。
...
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
正在被调用。this.state.enabled
确实更改为true
. 但是,this.getData
没有被调用。
我发现有趣的一件事是,这发生在我通过 npm 包使用的组件上。在我自己的代码中,setState
回调按设计工作。
所说的外部组件也是我自己打包的。我正在使用 webpack 来构建它。我的 webpack 配置可能有问题吗?
这里是:
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'
};
编辑:
所以现在我很确定当我从包中使用我的组件时,当我从我的源中使用它时,会发生一些可疑的事情。
当我setState
从作为源代码一部分的组件调用时,这就是所谓的:
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');
}
};
以上来自一个名为 ReactBaseClasses.js
当我setState
从打包为 npm 包的组件调用时,这就是所谓的:
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');
};
以上来自一个名为react.development.js
. 请注意,回调被传递给enqueueSetState
. 有趣的是,当我闯入时enqueueSetState
,该函数对回调没有任何作用:
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);
},