将 Mobx 与 React typescript 一起使用时，如何删除错误“ReferenceError: 'Symbol' is undefined”？

Question

我正在创建一个测试项目来尝试 Mobx 和 react。 这是我遵循的程序

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

在 tsconfig.json 中设置 "experimentalDecorators": 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