mobx-state-tree not rendering state change for multiple model

Viewed 25

I have a React JSX element and the props for has dependency on multiple models . Basically its something like this

import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _, { entries } from "lodash";
import { Model1 } from "@/types/model1";

const { id } = useParams();
const { mystores } = useStore();
const mystore = id ? mystores.get(id) : null;

const items: [string, Model1][] = entries(mystore?.model_1?.records);
const recordData = _.chain(items)
.map(([key, model1]) => {
  const model2 = mystore?.model_2.records.get(model1.model2_uuid);
  const model3 = mystore?.model_3.records.get(model1.model3_uuid);
  const model4 = model2 && mystore?.model_4.records.get(model2.model4_uuid);
  const model5 =
    model3 && mystore?.model5.records.get(model3.model5_uuid);
  if (model2 && model3 && model4 && model5) {
    return {
      model1: model1,
      model2: model2,
      model3: model3,
      model4: model4,
      model5: model5
      key: key,
    };
  }
  return null;
})
.compact()
.value();

<Box mt={10}>
      <MyComponent
        myprop={[...recordData.map(({model1,model2,model3,model4,model5}) => toJS({model1,model2,model3,model4,model5}))]}
      />
    </Box>

Now in a scenario I am only updating the state of model1 , the MyComponent , myprop is not rendering the updated state (verifying in UI).

But at the same time , if I render only model1 to MyComponent its showing the changes.

import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _, { entries } from "lodash";

const { id } = useParams();
const { mystores } = useStore();
const mystore = id ? mystores.get(id) : null;

const items: [string, Model1][] = entries(mystore?.model_1?.records);

<Box mt={10}>
      <MyComponent
        myprop={[...items.map(([, model1]) => toJS(model1))]}
      />
    </Box>

I have added all my JSX.Element as observable.

So basically only passing the model1 as props and moving recordData preparation in MyComponent will fix the issue. So is it I am loosing the state change event during recordData preparation only.

0 Answers
Related