我正在使用transform-class-properties。当我更改按钮文本等内容时,一切正常,但是当我修改如下所示的函数时:
class App extends React.Component {
fetchUser = (e) => {
axios.get('/api/test/' + this.state.username)
.then(function (response) {
console.log(response.data);
}).catch(function (response) {
console.log(response);
});
};
}
在手动刷新页面之前,该操作没有任何效果。我在控制台中看到一些输出:
[React Transform HMR] Patching App
log-apply-result.js?d762:20 [HMR] Updated modules:
log-apply-result.js?d762:22 [HMR] - 76
但是直到刷新后我的更改才会出现。该功能正在运行(transform-class-properties),但是它对于更改是无懈可击的。当我添加类似内容console.log('foobar');
并按下按钮时,没有任何反应。我的意思是没有新的事情发生。当我更改了ES6可以按预期理解此正常工作的普通类方法语法的语法时,我看到console.log处于“实时”状态而没有刷新,因此我认为在编译过程中出了点问题。
这是我的webpack.development.config.js文件:
const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'resources/assets/js'),
publicPath: path.join(__dirname, 'public')
};
module.exports = {
entry: [
"webpack-dev-server/client?http://localhost:4444",
"webpack/hot/dev-server",
PATHS.app
],
output: {
path: PATHS.publicPath,
publicPath: '/js/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "react-hot",
exclude: /node_modules/
},
{
test: /\.jsx?$/,
include: PATHS.app,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0', 'react-hmre'], // set of plugins out of the box
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}
]
},
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.publicPath,
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
noInfo: false,
stats: 'errors-only',
host: process.env.HOST,
port: 4444,
proxy: {
"/api/*": "http://127.0.0.1:8000/"
}
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true
})
]
};
这是一个与变换相关的问题。它修补方法就好了。问题在于,在这种情况下,fetchUser = (e) => {
生成的代码或多或少等于您的绑定constructor
。react-transform不打补丁constructor
(按定义运行一次)。
也许有一天该问题将得到解决,但目前这样的代码尚无法解决。基于功能的组件也存在问题,因为安装程序也无法修补这些组件。
解决此问题的一种方法是将状态管理推到其他位置,并在可能时依靠标准方法。对标准方法进行修补就可以了,您可以通过实现热加载界面(几行代码)来使Redux HMR之类的解决方案轻松兼容。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句