可观察子类化的扩展：[MobX] 不能为已经可观察的对象提供选项

Question

当我创建一个具有很少扩展的深层结构时，我收到了这种错误：

未捕获错误：[MobX]无法为已经可观察的对象提供选项。

"mobx": "^6.4.2" , "mobx-react-lite": "^3.3.0"，

所有代码只是肮脏的例子。真实的结构更加复杂。

代码示例：





import { makeObservable, observable, action } from 'mobx';

class DateMobx {
    date ;

    constructor(data) {
        this.date = new Date(data.date);
        makeObservable(this, { date: observable }, { autoBind: true });
    }
}

class Todo extends DateMobx {
    id = 0;
    title = 'title';
    text = 'text';

    constructor(todo) {
        super(todo);
        this.id  = todo.id;
        this.title  = todo.title;
        makeObservable(this, { id: observable,  title: observable, changeTitle: action }, { autoBind: true });
    }

    changeTitle= (e) => {
        const { value } = e.target;
        this.title = value;
    }
}

class TodoList {
    todo = [];

    constructor() {
        const todoData = [{ id: 1, title: 'title', date: '123' }];
        this.todo = todoData.map(item => new Todo(item)); // ERROR happen here

        makeObservable(this, { todo: observable }, { autoBind: true });
    }
}


 TodoList 类的构造函数中发生错误。

如果从 Todo 类中删除 makeObservable ，则不会重现错误，但我需要该类中的反应性。

如果从 Todo 类中删除 extends DateMobx ，错误也不会重现（但我有很多具有基本逻辑的通用类，我也需要反应性）。


 为什么会发生这种情况？如果我真的需要这种深层结构该怎么办？

Answer 1

github 上的人给我带来了正确的解决方案

不要传递第三个参数 ({ autoBind: true }) 到子类中的 makeObservable。所有选项都是“继承的”，并且不能通过对同一对象 (this) 的后续 makeObservable 调用来更改。

选项参数只能提供一次。传递的选项有
“粘性”并且以后不能更改（例如在子类中）。

https://mobx.js.org/observable-state.html#limitations