标签: mobx-react

我有三个组成部分；表单、预览和 AppStore。单击表单中的按钮会将商品添加到商店。这似乎工作正常，除了预览组件中的列表在商店更改时不会更新/重新渲染，即使它有一个 @observer 装饰器。我缺少什么？

表单有一个按钮和处理函数，用于将项目添加到商店：

    @inject('AppStore')
    @observer class Form extends React.Component{

      handleAddItem= (item) =>{
        const {AppStore} = this.props;
        AppStore.addItem(item);
        console.log(AppStore.current.items)
      }

      render(){
        return(
              <button onClick={() => this.handleAddItem('Another Item')}>Add Item</button>

        )}
    }

通过项目预览地图（我正在使用拖放功能，因此我的代码可能看起来有点奇怪）

  @inject('AppStore')
  @observer class Preview extends React.Component

...

return(
   <ul>
       {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
        ))}
  </ul>)

...

  return <SortableList items={AppStore.current.items} onSortEnd={this.onSortEnd} />;

这里是商店：

import { observable, action, computed } from "mobx";

class AppStore {
  @observable other = {name: '', desc:'', items: [ 'item 1', …

我定义了一个从数组中删除项目的操作：

export default class myStore {

  @observable items = [];
  ...
  ...

  @action deleteItem = async (target) => {
    try {
      await backendService.deleteItem(target.id);
      runInAction(() => {
        const targetIndex = this.items.indexOf(target);
        this.items.splice(targetIndex, 1);
      });
    } catch (error) {
      ...
    }
  };

  ...
  ...
}

尽管我将组件设置为observer，但它仍然不会更新我的列表，直到我触发一些其他操作（单击、重命名等），在这种情况下，我将能够看到该项目已被删除。

我错过了什么吗？

几乎所有示例（甚至官方文档）都mobx-react-light与useContext()hook结合使用。

然而，React、许多文章和博客文章建议不要 useContext()用于中/高频更新。状态不是可以非常频繁地更新的东西吗？

应该将包与钩子结合使用还是会出现性能问题？

如果您想以一种固执己见的方式使用 mobx 进行状态管理，则官方 Mobx 页面上推荐了这两种方法。

基于这些（1、2 ）， keystone看起来像是状态树的改进。拥有状态树所拥有的一切以及更多。我在任何地方都找不到状态树具有而梯形图没有的任何东西。

我发现 keystone 远没有 state-tree 那么成熟。这可能是阻止我选择它的主要原因。状态树相对于梯形校正还有哪些优点？

PS 它将在 React 应用程序中使用。

我需要迁移MobX v.5到MobX v6+支持 React hooks 的版本，但是升级到之后MobX v6+出现此错误，[MobX] Cannot obtain atom from undefined我能够追踪到当我想使用 来创建 Lazy observable 时onBecomeObserved，由于某种原因这会抛出上面的错误，但我无法弄清楚是什么原因导致的。

我使用 MobX 提供的注入将组件连接到存储，它可能不再是一个好的模式，但它对我来说是从旧的MobX. withTheme功能是Material-UI连接到主题系统

export function injector<T>(target: T): T {
  return inject('data', 'view')(withTheme(target));
}

export function storeConnect<T extends IReactComponent>(target: T): T {
  return injector(observer(target));
}

这是我创建惰性可观察的基础存储，它应该负责从 API 加载数据，但是我的应用程序崩溃了，无法找到解决方案。

abstract class BaseProvider {
  @observable state = "NONE";

  constructor() {
    //this it throws error
    onBecomeObserved(this, "isLoading", this.loadData);
  }

  public abstract loadData(): …

我已经使用简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用创建可观察的 MobX 状态，makeObservable但由于某种原因，当我尝试使用时makeAutoObservable出现错误

Cannot read property 'counter' of undefined

我怎么使用makeAutoObservable不正确？

店铺

import { makeAutoObservable, makeObservable, action, observable } from "mobx";

class SampleStore {
  counter = 0;

  constructor(arg) {
    makeAutoObservable(this);
    // makeObservable(this, {
    //   counter: observable,
    //   increment: action.bound,
    //   decrement: action.bound,
    // });
  }

  increment() {
    this.counter++;
    return this.counter;
  }

  decrement() {
    this.counter--;
    return this.counter;
  }
}

export default SampleStore;

useStore 钩子

import { createContext, useContext } from "react";

import …

在MobX中,如何在不重新设置每个值的情况下为整个可观察数组设置新值？

首先想到的是:

let arr = observable([]);
autorun(() => {
  console.log('my array changed!');
});
arr = ['foo', 'bar'];

但那不会解雇autorun,我会删除我的observable array并用新的值/数组替换它.

那么,这样做的正确方法是什么？

我此解决方案是使用另一个变量与一个设置器,和内侧setter函数改变观察的阵列索引由索引,置换,添加和删除的索引.像这样:

(这里是jsFiddle)

const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM
const {autorun} = mobx

class Store {
    @observable entries = [1,2,3,4,5];
    set rows(arr) {
        // add new values
        for (let i = 0, l = arr.length; …