useSnapshot not update

[beilo]

Hello, in the case of nesting multiple layers, Snap will not re-render.

Please tell me what I should do.

Here is my data structure.

Thank you very much.

  const update= () => {
    // useSnapshot not update ❎
    ledgerStore.ledgerList[0].members[0].userName = "1";
    // useSnapshot update ✅
    ledgerStore.ledgerList[0].name = "1";
  };

[dai-shi]

How do you use useSnapshot? Please create a minimal reproduction with codesandbox https://react.new.

[beilo]

https://codesandbox.io/s/distracted-jang-02hklt?file=/src/App.js

Sorry, I just wrote it. Trouble you!

[dai-shi]

It doesn't re-render, because it's not used.

If you use the property, it re-renders:
https://codesandbox.io/s/admiring-spence-0untrd?file=/src/App.js

[beilo]

It's so strange.

I have a global store.

https://github.com/beilo/keep-fit/blob/main/src/stores/ledger.ts

ledgerlist is the list view
https://github.com/beilo/keep-fit/blob/main/src/module-ledger/pages/ledger-list/index.tsx

https://github.com/beilo/keep-fit/blob/main/src/module-ledger/pages/ledger-list/index.tsx
The keyword：
apiGetLedgerList
snapLedgers?.map

CurrentLedger is the value assigned by clicking on the list item.

actionsLedgerStore.setCurrentLedger(ledger);

Now, the problem is when the API refreshes ledgerList.
I try to print store, the nested name is changed.

https://github.com/beilo/keep-fit/blob/main/src/stores/ledger.ts

subscribe(ledgerStore

However, the nested name in snapLedgerList is not updated, resulting in the old nested name when the pass Item is clicked.

https://github.com/beilo/keep-fit/blob/main/src/module-ledger/pages/ledger-list/index.tsx

jumpAA(item as ILedger);

[beilo]

I'm terribly sorry. I tried to provide a minimal demo. But it failed. The demo was fine.

So I can only provide my source code, try to explain clearly.

Put a burden on you. I'm terribly sorry

[dai-shi]

Keep trying to create a small repro, which will eventually solve your problem.