0

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
        })
    ]
};
4

1 に答える 1

1

これは、react-transform関連の問題です。メソッドに問題なくパッチを適用します。問題は、この場合、 でfetchUser = (e) => {のバインドとほぼ同等のコードが生成されることですconstructor。react-transform はパッチを適用しませんconstructor(定義により 1 回実行されます)。

いつか問題が解決されるかもしれませんが、現時点では、このようなコードは機能しません。機能ベースのコンポーネントにも問題があります。セットアップではまだパッチを適用できないからです。

この問題を回避する 1 つの方法は、状態管理を別の場所にプッシュし、可能な場合は標準的な方法に頼ることです。標準的なメソッドには問題なくパッチが適用され、ホット ローディング インターフェース (数行のコード) を実装することで、Redux HMR のようなソリューションを簡単に互換性のあるものにすることができます。

于 2016-04-17T08:11:59.333 に答える