我正在使用带有回调的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的文件
当我从打包为 npm 包的组件调用setState时，这就是所谓的：
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);
},
这可能是 React 的一个错误。显然，结合enqueueSetState和enqueueCallback功能是一个主要的bug修复，但这些是早期版本的React中单独运行的调用。
https://github.com/facebook/react/issues/8577
在导入 npm 模块时，有时它们会带来不同版本的 React 作为依赖项，从而使用 setState 和回调创建这些不一致的错误。
https://github.com/facebook/react/issues/10320
设置状态时，请这样做。
this.setState({enabled : true}, () => { this.getData() });
() => {}this绑定到其词法父上下文。
你可以(也许实际上应该)从componentDidUpdate调用getData方法。在状态更改后，它也将 100% 发生，并且(恕我直言)将使您的代码不那么地狱般的回调。
更新以下注释：您可以将以前的状态/属性与组件 DidUpdate 中的当前状态/属性进行比较，然后根据需要调用您的方法：
componentDidUpdate(prevProps, prevState) {
if (prevProps.something !== this.props.something) {
// do some magic
}
}
你提到回调是从handleLookupChange成功调用的，对吗？
因此，在触发onEnter事件后，handleChange成功地从handleLookupChange调用，并且成功设置了state的值，对吗？state的值是
{displayText : self.props.dataSource[selectedIndex]}
或
{displayText : newValue}.
所以这里有一种可能性。
我注意到handleLookupChange将两个值作为onEnter而不是event的参数。听起来您说onEnter事件成功地将两个参数传递给handleLookupChange并基于它们正确设置state。如果不是，我的猜测是handleLookupChange应该拿event并处理它以传递给handleChange.
或者另一个。
如果该转换成功发生，这是否会成为onEnter事件后如何从输入接收值的问题？
当您使用onEnter触发handleLookupChange时，是否有可能在输入中没有文本的情况下按 Enter 以某种方式返回 newValue 而不是null而是作为空字符串？这将导致displayText设置为newValue(因为它不为 null)，从而导致displayText设置为空字符串，导致回调addItem的if语句永远不会触发和运行？
您是否检查过addItem确定没有在if语句上方调用？
要检查的另一件事是dataSourceselectedIndex是否可能正在拾取空字符串，这可能会触发if语句不运行addItem内部。