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去掉，直接在页面改引用，会报错
报错
