mobx - How can I clone a object that has a observable property and autorun the new object's method?

Question

There is a object has a observable property . Autorun works well.

I want to clone a new object , but autorun won't work.

Here is my code：

Step1:

vim roadStore.mjs

import mobx from 'mobx'
const { observable, autorun } = mobx
import ramda from 'ramda'
const { clone } = ramda
const roadStore = {
  data: observable([
    {
      name: "something",
    }
  ]),

  getData: function () {
    console.log(this.data[0].name);
  }
}

var target = (roadStore)
// var target = clone(roadStore) // line18.

autorun(() => {
  console.log('----autorun');
  target.getData()
})


// clone

setTimeout(() => {
  target.data[0].name = 'timeout1'
}, 1000)
setTimeout(() => {
  target.data[0].name = 'timeout2'
}, 2000)


export default roadStore

Step2:

node --experimental-modules roadStore.mjs

you can see autorun 3 times (1 init + 2 modifed)

?  ? node --experimental-modules src/store/roadStore.mjs
(node:43793) ExperimentalWarning: The ESM module loader is experimental.
----autorun
something
[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableArray@1[..].name
----autorun
timeout1
[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableArray@1[..].name
----autorun
timeout2

Step3：

comment lin17

uncommnet lin18

import mobx from 'mobx'
const { observable, autorun } = mobx
import ramda from 'ramda'
const { clone } = ramda
const roadStore = {
  data: observable([
    {
      name: "something",
    }
  ]),

  getData: function () {
    console.log(this.data[0].name);
  }
}

// var target = (roadStore)
var target = clone(roadStore)

autorun(() => {
  console.log('----autorun');
  target.getData()
})


// clone

setTimeout(() => {
  target.data[0].name = 'timeout1'
}, 1000)
setTimeout(() => {
  target.data[0].name = 'timeout2'
}, 2000)


export default roadStore

auto run only run A time, why?

?  cp-side-panel git:(feat-cp-side-panel) ? node --experimental-modules src/store/roadStore.mjs
(node:44101) ExperimentalWarning: The ESM module loader is experimental.
----autorun
something

Answer 1

fixed by using makeObservable

const {makeObservable, observable, autorun} = require('mobx')
const {clone} = require('ramda')
var obj = {
  data: [
    {
      name: "something",
    }
  ],

  getData: function () {
    console.log(this.data[0].name);
  }
}


const target = clone(obj)

makeObservable(target, {
  data: observable,
})



autorun(() => {
  target.getData()
})

setTimeout(() => {
  target.data[0].name = "new string"
}, 2000)