标签: mobx

我定义了一个 mobx 地图如下：

@observable editors = observable.map();

然后我在editors下面添加了对象：

  editors.set(key, {
    alias: 'alias-1',
    message: 'hello',
  })

当我从editor下面获取对象时：

  let myEditor = editors.get(key)

返回的对象myEditor具有一些内置函数，例如：

$mobx:ObservableObjectAdministration
get alias:function ()
set alias:function ()
get message:function ()
set message:function ()

我想知道如何从editor?

假设以下结构

stores/
  RouterStore.js
  UserStore.js
  index.js

每个...Store.js文件都是一个包含@observable和的 mobx 存储类@action。index.js只导出所有商店，所以

import router from "./RouterStore";
import user from "./UserStore";

export default {
  user,
  router
};

访问另一家商店的正确方法是什么？即在我的 UserStore 中，当用户身份验证更改时，我需要从 RouterStore 分派操作。

我累了import store from "./index"里面UserStore，然后用store.router.transitionTo("/dashboard")（transitionTo）是RouterStore的类内的动作。

但这似乎不能正常工作。

我有React/Mobx应用程序.当我在商店中进行更改时,组件正在更新(重新呈现),但我需要进行一些比较以添加更多功能,因此我想使用componentWillReceiveProps(nextProps)并将nextProps与this.props进行比较.不知怎的,它没有被召唤.为了得到那个,任何想法,我做错了什么,或者我还能做些什么？

当我使用 mobx-react 和尝试使用 annotations 时，我收到了上述错误。这里我使用的是 .js 而不是 .ts。之前提供的所有解决方案对我来说都不成功。

import React, { Component } from 'react';
import { withRouter, Redirect } from 'react-router-dom';
import { observable, action } from 'mobx';
import { inject, observer } from 'mobx-react';

@inject('authStore')
@withRouter
@observer
class Login extends Component {

   componentWillUnmount() {
       this.props.authStore.reset();
   }

}

我的错误是

我在使用 mobx/mobx-react-lite 和 react 钩子有点挣扎。

从一个班级我想更新我的一个商店中的一个属性，但不知何故我无法让它工作。以下是我的商店如何组合的一些示例，以及我想从中调用我的商店的组件和类。我正在使用 Context from react 来获取我的钩子组件中的商店，而且效果很好。

// FooStore

import { observable, action } from "mobx";
import ExampleClass from "app/services/exampleClass";

export class FooStore {
    @observable
    public foo: string = "";

    @action
    public doSomething() {
        this.foo = ExampleClass.doSomething()
    }
}

export default FooStore;

// 酒吧商店

import { observable, action } from "mobx";

export class BarStore {
    @observable
    public bar: number = 0;

    @action
    public setBar(value: number) {
        this.bar
    }
}

export default BarStore;

//Store（将stores合二为一，用createContext()导出）

import { FooStore } …

我们创建了一个 theme.css :root 文件，其中包含许多常用变量，以便在我们的应用程序的各种其他 .css 文件中使用。

但是我们的一些旧代码具有类似的设置，但是在带有一些变量的 theme.ts 文件中。我想从我们的主题中导入变量。css进入我们的主题。ts以便可以从该单个 css 文件中操作所有内容。

我已经查看了一些链接，比如关于媒体的这篇文章，以及关于 stackoverflow 的这个答案，但没有骰子。

我想看看我是否可以让它工作，所以我使用了快速而肮脏的方法const s = require('./theme.css')，但我无法正确分配变量。

这是theme.css

:root {
  --primaryColor: #427ee1;
  --secondaryColor: #f2f2f2;
  --chatBackground: #fff;
  --typingAnimationDots: #427ee1;
  --typingAnimationFill: #f2f2f2;
  --userResponseColor: #427ee1;
  --fontType: 'Open Sans';
  --hoverFillColor: #306aca;
  --hoverFontColor: #f2f2f2;
}

和theme.ts带有我每次调用变量名称失败尝试的示例

const s = require('./theme.css')

const botMessageBackgroud = s.secondaryColor   // returns black like its undefined
const botMessageBorder = s['--primaryColor']   // also returns black
const botMessageColor = …

在我的 React 应用程序（带有打字稿）中，我想使用 React 钩子（特别是 useState）来管理表单状态，同时将其用作 Mobx 商店的可观察组件，但出现错误

钩子只能在函数组件的主体内部调用。

所以例如在以下组件中

import * as React from "react";
import { inject, observer } from "mobx-react";
import { MyStore } from "./MyStore";

interface IProps {
  myStore?: MyStore;
  id: string;
}

const MyComponent: React.FC<IProps> = props => {
  const [state, setState] = React.useState("");
  return (
    <div>
      <h1>{props.id}</h1>
    </div>
  );
};
export default inject("myStore")(observer(MyComponent));

我看到了一个解决方案，但它React.createContext用于导出商店类。是不是 Mobx 和 Hooks 的旧方法？

这是示例的沙盒

我在我的项目（React、TS、Mobx）中添加了 onChange 方法，但出现错误： Argument of type '{ [x: number]: any; }' is not assignable to parameter of type

我是 TypeScript 的新手，不知道为什么会这样。可能是什么问题？

(parameter) event: {
    target: {
        name: any;
        value: any;
    };
}

'{ [x: number]: any; 类型的参数 }' 不可分配给类型为 'IAddPlayerFormState | 的参数 ((prevState: Readonly, props: Readonly) => IAddPlayerFormState | Pick | null) | 选择<...> | 空值'。

import React, { Component } from 'react';
import ViewStore from '../../../store/ViewStore';
import { TextField } from './../../../utils';

interface IAddPlayerFormProps {
  viewStore?: ViewStore; // Optional …

Mobx 支持 @observable 和 @observable.ref 修饰符，他们的官方文档说

observable: This is the default modifier, used by any observable. It clones and converts any (not yet observable) array, Map or plain object into it's observable counterpart upon assignment to the given property

observable.ref: Disables automatic observable conversion, just creates an observable reference instead.

我不明白为什么我们需要为已经存在的 observable 创建一个 observable 引用。这两者有何不同以及它们的用例是什么？

尝试导入错误：“装饰”未从“mobx”导出。我的mobx版本是6.0，我尝试将包从mobx改成mobx-react、mobx-react-lite、mobx-decorate。但是还是无法解决。

提前致谢

截屏