mobx深动/等待功能和装饰@Action

我struggeling设置我的项目正确useStrict(true)mobx深动/等待功能和装饰@Action

错误

mobx.module.js:2238 Uncaught (in promise) Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: [email protected] 
    at invariant (mobx.module.js:2238) 
    at fail (mobx.module.js:2233) 
    at checkIfStateModificationsAreAllowed (mobx.module.js:2794) 
    at ObservableValue.prepareNewValue (mobx.module.js:750) 
    at setPropertyValue (mobx.module.js:1605) 
    at WikiStore.set [as tags] (mobx.module.js:1575) 
    at WikiStore.<anonymous> (WikiStore.tsx:25) 
    at step (tslib.es6.js:91) 
    at Object.next (tslib.es6.js:72) 
    at fulfilled (tslib.es6.js:62)

运行时摆脱mobx错误的我安装程序编译，但错误仍然存在，所以在我的构建链中一定有错误。

我已经使用GitHub提供的信息here，但它的含义都很模糊。

.babelrc

{ 
"passPerPreset": true, 
"presets": [ 
    { 
     "plugins": ["transform-regenerator"] 
    }, 
    { 
     "plugins": ["mobx-deep-action"] 
    }, 
    { 
     "plugins": ["babel-plugin-transform-decorators-legacy"] 
    }, 
    "es2015", "react", "stage-0" 
] 
}

webpack.config.js

const path = require("path"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const webpack = require("webpack"); 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

const clientBundleOutputDir = "./wwwroot/dist"; 

module.exports = (env) => { 

    const clientConfig = { 
     stats: { modules: false }, 
     entry: { "main-client": "./Client/index.tsx" }, 
     resolve: { extensions: [".js", ".jsx", ".ts", ".tsx" ] }, 
     output: { 
      filename: "[name].js", 
      path: path.join(__dirname, clientBundleOutputDir), 
      publicPath: "/dist/" 
     }, 
     module: { 
      rules: [ 
       { test: /\.s?css$/, use: ["css-hot-loader"].concat(ExtractTextPlugin.extract({fallback: "style-loader", use: ["css-loader", "sass-loader"]})) }, 
       { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
       { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, 
       { test: /\.(png|svg|jpg|gif|ico)$/, use: ["file-loader"] }, 
       // { test: /\.tsx?$/, include: /Client/, use: "awesome-typescript-loader?silent=true&useBabel=true&useCache=true" } 
       { test: /\.tsx?$/, include: /Client/, use: ["babel-loader", "ts-loader"] } 
      ] 
     }, 
     plugins: [ 
      new CheckerPlugin(), 
      new ExtractTextPlugin("site.css"), 
      new webpack.SourceMapDevToolPlugin({ 
       filename: "[file].map", 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') 
      }) 
     ] 
    }; 

    return [clientConfig]; 
};

我曾尝试真棒打字稿装载机，也是TS-装载机，巴贝尔装载机组合。

在这里，我的商店（精简版）

import { autorun, observable, action } from "mobx"; 
import { Wiki } from "../models/Wiki"; 
import { Tag } from "../models/Tag"; 
import * as Api from "../api/api"; 

export class WikiStore { 
    @observable public tags: Tag[] = []; 

    constructor() { 
     this.getTags(); 
    } 

    @action 
    public async getTags() { 
     this.tags = await Api.getTags(); 
    } 
} 

export const wikiStore = new WikiStore();

，只要我打电话从阵营组件出现错误wikiStore.getTags（）。没有useStrict(true)（如预期）一切正常工作正常

也许有人有一个想法。

来源

2017-08-25 VSDekar

您是否检查过https://mobx.js.org/best/actions.html？ – mweststrate

@mweststrate是的，那就是我从 – VSDekar

@mweststrate得到了mobx-deep-action GitHub回购的链接好了，经过一个晚上，我一次又一次地阅读了文档。我现在看到，mobx-deep-action解决了另一个问题，我必须用runInAction将我的任务包装在另一个动作中。 – VSDekar

我觉得你还是需要分割的await和分配：

@action 
public async getTags() { 
    const tags = await Api.getTags(); 
    this.tags.replace(tags); 
}

来源

2017-08-25 17:07:07 Tholle

这确实可以防止错误，但它不会触发我的UI的重新渲染。当我做'runInAction（（）=> this.tags =标签）;'发生重投。什么不见了？ – VSDekar

请在这里阅读： https://mobx.js.org/best/actions.html#async-await

结果，@action只适用于代码块，直到第一个等待

所以const tags = await Api.getTags();必须再次包裹

@action 
public async getTags() { 
    const tags = await Api.getTags(); 
    runInAction(() => { 
     this.tags = tags; 
    }) 
}

来源

2017-09-29 10:44:22 Daniel

mobx深动/等待功能和装饰@Action

回答

相关问题