mobx 踩坑

1. enforceActions 对 observable.shallow无效

class EditPage {
  @observable input = "";
  @observable.shallow list = [
    { title: "ccc", price: 10 },
    { title: "lll", price: 99 },
    { title: "ooo", price: 23 },
    { title: "jjj", price: 35 },
  ];

  @action alterTitle = (val: string) => {
    // 需要返回新数组 不然页面不会重新渲染
    this.list = [{ ...this.list[0], title: val }, ...this.list.slice(1)];
  };
}

页面调用

function EditPage(props: any) {
  const handleChange = (e: any) => {
    editPage.list[0].title = e.target.value; // 改变内部没有被Proxy代理的属性，并不会引起报错
    // editPage.alterTitle(e.target.value);
  };
  return (
    

      请输入：
      
      

        值：
        {editPage.input}
      
      
    
  );
}

将 shallow去掉，直接在页面改引用，会报错

报错