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

符号是JSCore功能，显然您的项目中仍然缺少该功能。

一个简单的修复程序已降级到mobx 4.X版

请参阅https://github.com/mobxjs/mobx/issues/1889

使用Mobx和react typescript时如何删除错误'ReferenceError：'Symbol'is undefined'？

1 个答案: