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 (
    <div>
      <label htmlFor="">请输入:</label>
      <input type="text" onChange={handleChange} />
      <p>
        <label htmlFor="">值:</label>
        {editPage.input}
      </p>
      <NextBookList></NextBookList>
    </div>
  );
}

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


报错
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 在之前文章里可以知道,本人一直致力于推广react和mobx结合开发webapp。很遗憾的是个人目前为止还没...
    jamie_Ye阅读 4,945评论 0 4
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,054评论 2 59
  • 原文链接:http://devs.cloudimmunity.com/gotchas-and-common-mis...
    youyouxia263阅读 693评论 0 1
  • 最近几个月因为公司的业务需求,一直在折腾小程序,从开始的完全不熟悉,到后面被各种坑折磨,是时候写一篇总结了,避免下...
    ArmorVon阅读 1,911评论 1 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,587评论 16 22