0

我正在使用转换类属性。当我更改按钮文本等内容时，一切正常，但是当我修改如下所示的功能时： 

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

但是在我刷新之前我的更改不存在。此功能正在运行（转换类属性），但它对更改是无懈可击的。当我添加类似的东西console.log('foobar');并按下按钮时，什么也没有发生。我的意思是没有新的事情发生。当我更改 ES6 按预期理解 THIS WORKS 的普通类方法语法的语法时，我看到 console.log “live”没有刷新，所以我认为在转译过程中出现了问题。

这是我的 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
        })
    ]
};
4

1 回答 1

1

这是一个与反应转换相关的问题。它修补方法就好了。问题是，在这种情况下，fetchUser = (e) => {生成的代码或多或少等于在您的constructor. react-transform 不打补丁constructor（根据定义运行一次）。

也许有一天问题会得到解决，但目前这样的代码无法使用它。基于功能的组件也存在问题，因为设置也无法修补这些问题。

解决此问题的一种方法是将状态管理推向其他地方，并在可能的情况下依赖标准方法。标准方法可以很好地修补，您可以通过实现热加载接口（几行代码）轻松地使 Redux HMR 等解决方案兼容。

于 2016-04-17T08:11:59.333 回答