如何在使用具有反应打字稿的Mobx时删除错误'ReferenceError：'符号'未定义'？

Question

我正在创建一个测试项目来尝试Mobx做出反应。这是我遵循的程序

npm -i --save mobx mobx-react
npm run eject
npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

设置“experimentalDecorators”：在tsconfig.json中为true

将插件部分添加到babel内的package.json文件中：

{
"plugins": ["transform-decorators-legacy"]
}

这是我的代码：

Root.tsx

import {Provider} from 'mobx-react';
import * as React from 'react';
import AssetsStore from '../Store/AssetsStore';
import AddAsset from './AddAsset';
import DisplayAssets from'./DisplayAssets';

const assetsStore = new AssetsStore();

class Root extends React.Component{

    public render(){
        return(
            <Provider assetStore = {assetsStore}>
                <AddAsset/>
                <DisplayAssets/>
            </Provider>
        )
    }

}

export default Root;

AddAsset.tsx

import { inject } from 'mobx-react';
import* as React from 'react';
import AssetsStore from '../Store/AssetsStore';

// tslint:disable-next-line:no-empty-interface
interface IProps{    
}

interface IAsset{
    assetname:string
}

// try removiing IProps from here
interface InjectedProps extends IProps{
    assetsStore:AssetsStore
}

@inject('assetsStore')
export default class AddAsset extends React.Component<IProps,IAsset>{
    public assetStore:AssetsStore;
    constructor(props:IProps){
        super(props);

        this.state ={
            assetname : ''
        }
        this.assetStore = this.injected.assetsStore
    }    

    public onAssetChange = (event:React.ChangeEvent<HTMLInputElement>) =>{
        this.setState({
            assetname:event.target.value
        })
        if(event.target.accessKey === '13' && this.state.assetname!==''){
            this.assetStore.addAsset(this.state.assetname);
        }        
    }

    get injected(){
        return this.props as InjectedProps;
    }

    public render(){
        return(
            <input value={this.state.assetname} onChange={this.onAssetChange}/>
        )
    }
}

DisplayAssets.tsx

import {inject, observer} from 'mobx-react';
import * as React from 'react';
import AssetsStore from '../Store/AssetsStore';

// tslint:disable-next-line:no-empty-interface
interface IProps{    
}

interface InjectedProps extends IProps{
    assetsStore:AssetsStore
}
@inject('assetsStore')
@observer
class DisplayAssets extends React.Component<IProps>{
    public assetsStore:AssetsStore;
    
    constructor(props:IProps){
        super(props);

        this.assetsStore = this.injected.assetsStore;
    }

    get injected(){
        return this.props as InjectedProps;
    }

    public render(){
        return(
            <ul>
                {
                    Object.keys(this.assetsStore.assets).map((asset, index) =>{
                        return <li key={index}>{asset}</li>
                    })
                }
            </ul>
        )
    }
}

export default DisplayAssets;

代码正在成功编译。但是我在浏览器上遇到错误运行时错误。我附上了一个显示错误的图像。 enter image description here

甚至我尝试添加一个新包：

npm install --save-dev @babel/plugin-proposal-decorators

并将插件更改为

"plugins": [
"@babel/plugin-proposal-decorators"
]

但得到同样的错误这里有什么问题？

Answer 1

Symbol是一个JSCore功能，在您的项目中显然仍然缺少。

一个简单的修复是降级到mobx版本4.X.

见https://github.com/mobxjs/mobx/issues/1889