标签: mobx-react

我正在我的React Native应用程序中实现一个单词搜索工具.我有一个MobX商店wordStore.每个文本更改都会通过setFilter操作触发数据库查询.从控制台调试输出可以看出这一切都在幕后工作.

但是,WordList一旦触发任何更新,组件似乎就会消失,即如果我设置了一个默认的过滤字符串,它会显示列表中的匹配项,但是一旦任何文本更改它就会消失.

有什么我想念的吗？奇怪的是WordList.render()即使它不可见,该方法也会被执行.

编辑:渲染数组的.toString()方法从包含组件工作正常,但奇怪的是迭代数组也显示相同的行为,在更新时消失.

包含组件:

const WordSearch = observer(class WordSearch extends React.Component {

    constructor(props) {
        super(props);
    }


    render() {
      let words = wordStore.getWords(); // For debugging
      return (
        <View>
          <TextInput
            style={styles.textInput}
            onChangeText={(filter) => wordStore.setFilter (filter)}
            value={wordStore.filter}
          />
          <Text>{words.toString()}</Text> <!-- This works -->
          <View style={{flex:1}} key={wordStore.filter}> <!-- This disappears too -->
            {words.map((word, i) => {
            console.log ('word: '+word);
            return <View style={{flex:1}} key={i}>
              <Text>{word}</Text>
            </View>
            })}
          </View>
          <WordList {...this.props} /> …

我收到了来自 Mobx 的警告信息。

[mobx.array] 尝试读取超出范围 (0) 的数组索引 (0)。请先检查长度。MobX 不会跟踪越界索引

@observable checks = {
      deviceType: ['phone','laptop', ...],
      deviceTypeChecks: [],
      ...
    }

@action
selectAllChecks = (target, type) => {
     const targetChecks = []
     if (this.checks[target].length !== this.checks[type].length) {
        this.checks[target].forEach(el => targetChecks.push(el))
      }
     this.checks[type] = targetChecks
}

我怎样才能删除那个警告？但是，这段代码没有问题。它运作良好。

我正在selectAllChecks通过 onChange 函数使用函数。

const {
  deviceType,
  deviceTypeChecks
} = this.props.store.checks

<label className="mr10">
          <input
            type="checkbox"
            checked={deviceType.length === deviceTypeChecks.length}
            onChange={() =>
              selectAllChecks('deviceType', 'deviceTypeChecks')
            }
          />
          <span>All device type</span>
        </label>

我必须为 IE 提供 4 个版本。

"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?

我是 Mobx 的新手，但到目前为止它运行良好，而且我已经取得了很大进展。我有一个带有 mobx 和 mobx-persist 的 react-native 应用程序。我正在使用 axios 从 Wordpress 站点中提取帖子。我试图改进的功能是“添加到收藏夹”功能。

这是我的 PostsStore：

export default class PostsStore {

// Define observables and persisting elements
@observable isLoading = true;
@persist('list') @observable posts = [];
@persist('list') @observable favorites = [];

// Get posts from Wordpress REST API
@action getPosts() {
  this.isLoading = true;
  axios({
    url: 'SITE_URL',
    method: 'get'
  })
    .then((response) => {
      this.posts = response.data
      this.isLoading = false
    })
    .catch(error => console.log(error))
}

// Add post to favorites list, ensuring …

当我使用 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 } …

在我的 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 的旧方法？

这是示例的沙盒

将节点添加到列表中，但组件未重新渲染。Mobx Chrome 扩展开发工具说这是一个依赖项，但由于某种原因仍然没有反应！

按钮根据节点是否在列表中呈现“添加”或“删除”。除非我移动到另一个组件然后再次打开该组件，否则它不会重新渲染。

纽扣：

@inject("appStore") @observer
class EntityTab extends Component {
...
    render() {
         return (
            ...
            {/* BUTTONS */}
            { this.props.appStore.repo.canvas.graph.structure.dictionary[id] !== undefined ?
                <div onClick={() => this.props.appStore.repo.canvas.graph.function(id)}>
                     <p>Remove</p>
                </div>
                :
                <div onClick={() => this.props.appStore.currRepo.canvas.otherfunction(id)}>
                    <p>Add</p>
                </div>
            }
            ...
          )
    }
}

添加按钮呈现，我单击触发的按钮

this.props.appStore.currRepo.canvas.otherfunction(id)

然后我们转到这个函数

@observable graph = new Graph();
...
@action
    otherfunction = (idList) => {
        // Do nothing if no ids are given
        if (idList === null || (Array.isArray(idList) && idList.length === 0)) return;

        // If …

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 引用。这两者有何不同以及它们的用例是什么？

我在 React 应用程序中使用带有 Typescript 的 mobx-state-tree。而且，我在使用 Typescript 时遇到了问题，它抱怨 mobx type 的类型types.safeReference。看起来safeReference模型定义中的类型与您.create()实际创建模型实例时使用的类型不同。在我的代码中，selectedProduct的类型被转换为string | number | undefined | nullin productStore，但在模型定义中是IStateTreeNode<...> | undefined | null，这就是我在我的根存储中收到错误的原因。我该如何解决？

这是我的产品商店：

import { types } from "mobx-state-tree";

const Product = types.model("Product", {
   id: types.identifier,
   name: types.string
})

const ProductStore = types
  .model("ProductStore", {
    products: types.array(Product),
    selectedProduct: types.safeReference(Product),
  })
  .actions((self) => ({
      // actions here
  }));

export const productStore = ProductStore.create({
  products: [],
  selectedProduct: undefined // …