Javascript 组件没有'；存储更新时不重新渲染-Mobx

我有三个部分；表单、预览和应用商店。单击表单中的按钮可将项目添加到商店。这似乎可以正常工作，但预览组件中的列表在存储更改时不会更新/重新呈现，即使它有@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>

        )}
    }

---

我敢肯定，在这种情况下，MobX不会将可观测性一直扩展到当前的.items数组中

当第一次构造/初始化时，将扩展可观察性——因此

current.items

是一个可观察属性，如果将其值更改为其他原语，组件将重新呈现

例如：

current.items = 1; // changing it from your array to some totally new value
current.items = []; // this _might_ also work because it's a new array

类似地，如果AppStore有一个您正在更改的顶级可观察的

items

，那么调用

items.push（）

class AppStore {
    @observable items = [];

    @action additem = (item) => {
        this.items.push(item);
    }
}

您案例中的问题是，
items
被深埋在一个可观察对象的内部一层——因此将项推入当前的
数组中。items
数组不会以MobX可以检测到的方式更改属性的值

不可否认，这是非常令人困惑的，而且这些问题有时很难理解

另请参见对象文档中的此行：

只有普通物体才能被观察到。对于非平面对象，它
被认为是构造函数初始化
可观察属性

尝试将您的操作替换为：

@action addItem = (item) => {
   this.current.items = this.current.items.concat([item]);
}

在这里，不要使用
push
来修改属性，而是使用
concat
，它用于合并两个数组，并返回一个全新的数组，其中包含MobX可以响应的新引用。
谢谢，我现在已经更改了它，但出于某种原因，它仍然没有重新渲染。有什么想法吗？我刚刚注意到
AppStore.addBlock（item）
——这不应该是
AppStore.additem（item）
？这只是我在将代码复制到问题时的一个输入错误，为了清楚起见，我将“block”改为“item”。当前代码中不存在该错误。该操作确实有效，但由于某些原因，当存储更新时，预览组件不会重新呈现。也许我可以让它在道具改变的时候重新渲染？因为某些原因，这使得所有东西都增加了两次
item
被添加到数组中两次？是的，以前没有这样做。如果添加item，您的组件现在正在更新吗？我使用componentWillReceiveProps解决了这个问题。我在某处读到，尽管Mobx存储是同步的，但组件仍然异步更新，这可能就是我的问题所在。
import { observable, action, computed } from "mobx";

class AppStore {
  @observable other = {name: '', desc:'', items: [ 'item 1', 'item 2', 'item 3'], id:''}
  @observable current = {name: '', desc:'', items: [ 'item 1', 'item 2', 'item 3'], id:''}

  @action addItem = (item) => {
    this.current.items.push(item)
  }
}

const store = new AppStore();
export default store;

current.items = 1; // changing it from your array to some totally new value
current.items = []; // this _might_ also work because it's a new array

class AppStore {
    @observable items = [];

    @action additem = (item) => {
        this.items.push(item);
    }
}

@action addItem = (item) => {
   this.current.items = this.current.items.concat([item]);
}