avkonst/hookstate

Challenges updated nested values (proxy error)

kisonay opened this issue · 1 comments

I'm hoping to get some guidance as I am struggling to get this to work and not sure if it is a bug (like in #286).

I have the following state:

{
  "item": {
    "name": "item name",
    "subItems": [
      {"name": "subitem1 name"},
      {"name": "subitem2 name"}
    ]
  },
  "options": {
    "key": "value"
  }
}

When I try to replace the items found in item.subItems I get the following error in the console:

TypeError: 'get' on proxy: property '0' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')

I can update the parent item without issue.

state.item.merge({"name":"new item name"}) 

I can empty the subItem child without issue.

state.item.subItems.set([]) 

I can modify items in the subItem array without issue.

state.item.subItems[1].merge({"name":"new subitem2 name"}) 

I cannot replace the contents of the subItems array with new items without the error above.

state.item.subItems.set([
  {"name": "different subitem1 name"},
  {"name": "different subitem2 name"}
]) 

Why is this happening?

::edit::

So it turns out that there must be something wrong with the data I'm retrieving and trying to add to the state. The following works without issue. Logging the array to the console doesn't reveal anything out of the ordinary, so not sure why it is behaving like this.

        state.item.subItems.set([]);
        for (const subItem of loadedSubItems) {
          const { name } = subItem;
          state.item.subItems.merge([{ name }]);
        }

If you have this problem still, please post a callstack here. And preferably a reproducer.