score:1

Accepted answer

as you are passing the store state to item again after clicking save, you need to listen for props change in item and set the state again to trigger rerender.

therefore, the 1st step is to find out which value we want to monitor for changes. from the code, it is obvious that status is the best candidate.

item.js

// not the final solution
// monitor props status change, set the state again and trigger rerender
useeffect(() => {
    setstate({ ...state, ...props });
}, [props.status]);

however, there is a problem to tackle if we use props.status to trigger rerender.

e.g.

when you first click the save on item 2, item status change from open -> lock, the item rerender. no problem!.

but when you change the dropdown box from lock to open of item 2 and click the save again, item will not rerender.

as the updated store status of item 2 is still marked as lock, previous status is also lock, there is no changes at all in react point of view.

you can check this codesandbox to simulate the issue.


to address this issue, we need to introduce extra property to monitor its change for rerender. i used updatedat to generate time on each update to let's react know there is a differences on the value and trigger rerender for us.

modal.js

items: [
    { id: 1212, title: "watch mojos", subtitle: "", status: "open", updatedat: null },
    { id: 1213, title: "drink cheetos", subtitle: "", status: "open", updatedat: null },
    { id: 1214, title: "eat frodos", subtitle: "", status: "lock", updatedat: null }
]

saveitem: action((state, payload) => {
    console.log(payload);
    state.items = state.items.map((d) => {
      if (d.id === payload.id) {
        d.status = "lock";
        d.updatedat = new date(); // assign new date on each update
      }
      return d;
    });
})

item.js

useeffect(() => {
    setstate({ ...state, ...props });
}, [props.updatedat]); // monitor update date change instead of status change

here is the workable codesandbox


Related Query

More Query from same tag