在使用装饰器React项目将ESLint集成到MobX的过程中，我遇到了未定义存储的问题。
我已经阅读了很多关于如何使用装配器和mobx的帖子，并且有一个明确的，有报道的方法可以使它工作，但与此同时，空气中的情绪只是没有使用它们，而是使用装饰器替换的包装函数。我不想在解决方案中失去可读性和易用性，但此时此刻我还不确定还能尝试使用此功能。
此时我的项目中有两个单独的git分支，可以提供带有装饰器的工作构建示例，如上所述，添加linting工具时会出现问题
以下问题的代码示例：
App.jsx
import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import LazyRoute from 'lazy-route';
import styles from './styles/app.css';
@withRouter
@inject('store')
@observer
export default class App extends Component {
constructor(props) {
super(props);
this.store = this.props.store;
}
componentDidMount() {
//here's where the error is triggered, authenticate is a function in the store but it throws undefined
this.store.appState.authenticate();
}
render() {
return (
<div className={`container-fluid ${styles.wrapper}`}>
<Route exact path="/" render={props => <LazyRoute {...props} component={import('./Home')} />} />
<Route exact path="/profile" render={props => <LazyRoute {...props} component={import('./Profile')} />} />
<Route exact path="/balance" render={props => <LazyRoute {...props} component={import('./Balance')} />} />
<Route render={props => <LazyRoute {...props} component={import('./Home')} />} />
</div>
);
}
}
.babelrc
{ "presets": ["react", "es2015", "stage-1"], "plugins": ["transform-decorators-legacy"] }
依赖关系：
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.7",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"html-webpack-plugin": "^2.22.0",
"image-webpack-loader": "^2.0.0",
"node-sass": "^3.10.1",
"postcss-loader": "^0.13.0",
"react-hot-loader": "next",
"resolve-url-loader": "^1.6.0",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"axios": "^0.15.0",
"babel-eslint": "^8.0.0",
"babel-preset-env": "^1.6.0",
"bootstrap": "^3.3.7",
"create-react-class": "^15.6.0",
"eslint": "^3.19.0 || ^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.5.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.0",
"eslint-plugin-react": "^7.1.0",
"faker": "^3.1.0",
"http-server": "^0.10.0",
"jquery": "^3.2.1",
"lazy-route": "^1.0.7",
"mobx": "^2.5.2",
"mobx-react": "4.0.0",
"mobx-react-devtools": "^4.2.6",
"moment": "^2.18.1",
"package": "^1.0.1",
"react": "^15.6.1",
"react-bootstrap": "latest",
"react-bootstrap-date-picker": "^5.1.0",
"react-dom": "^15.6.1",
"react-loader": "^2.4.2",
"react-router-dom": "latest",
"react-stripe-elements": "^0.0.8",
"rfx-core": "^1.5.3",
"transform-runtime": "^0.0.0",
"whatwg-fetch": "^1.0.0"
}
webpack.config.js：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['webpack-dev-server/client?http://0.0.0.0:3000', 'babel-polyfill', 'whatwg-fetch', './src/index.jsx'],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 8000,
host: 'localhost',
publicPath: '/',
historyApiFallback: true,
disableHostCheck: true,
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'app.[hash].js',
},
devtool: 'eval',
module: {
rules: [
{
test: /\.js$|jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss|css$/,
use: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'resolve-url-loader',
'sass-loader?sourceMap',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader',
},
{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({ hash: false, template: './index.hbs' }),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nb/),
],
};
完整控制台错误消息：
Uncaught TypeError: Cannot read property 'authenticate' of undefined
at App.componentDidMount (webpack:///./src/components/App.jsx?:54:26)
at App.target.(anonymous function) (webpack:///./~/mobx-react/index.js?:262:13)
at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:264:25)
at measureLifeCyclePerf (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12)
at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:263:11)
at CallbackQueue.notifyAll (webpack:///./~/react-dom/lib/CallbackQueue.js?:76:22)
at ReactReconcileTransaction.close (webpack:///./~/react-dom/lib/ReactReconcileTransaction.js?:80:26)
at ReactReconcileTransaction.closeAll (webpack:///./~/react-dom/lib/Transaction.js?:209:25)
at ReactReconcileTransaction.perform (webpack:///./~/react-dom/lib/Transaction.js?:156:16)
at batchedMountComponentIntoNode (webpack:///./~/react-dom/lib/ReactMount.js?:126:15)
答案 0 :(得分：0)
我遇到了这个问题。这可能会对你有所帮助：
1）在项目jsconfig.json的根目录中创建一个包含以下内容的文件：
{
"compilerOptions": {
"experimentalDecorators": true
}
}
2）您已经安装了"babel-plugin-transform-class-properties"，但可能没有使用它。尝试在'transform-class-properties'之后的插件部分中将.babelrc添加到'transform-decorators-legacy'，在我的情况下，它帮助了我。 .babelrc中的插件应如下所示：
plugins: [
'transform-decorators-legacy',
'transform-class-properties',
]