useReactive - read-only and non-configurable data property

[rimsila]

ahooks v2.10.12
can't access to record.rule it will showing error like picture below other wise like record.id is working fine. thanks you

[brickspert]

Can you provide an example？I can’t reproduce this problem in my test：https://codesandbox.io/s/eager-resonance-ebbh8?file=/App.tsx

[rimsila]

I not sure about that too maybe it error because of the data was not initial to useReactive (get from server) I can access to state.record.id but can't access tostate.record.rule maybe rule is object and very nested data. thanks you

[rimsila]

Can you provide an example？I can’t reproduce this problem in my test：https://codesandbox.io/s/eager-resonance-ebbh8?file=/App.tsx

@brickspert In my case above I'm not sure the root cause but I have test I see new case when useReactive contain react element or form data it cause the error

'get' on proxy: property '_store' 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>')

here is my reproduce https://codesandbox.io/s/condescending-pateu-rkq85?file=/App.tsx

[askurat]

Same issue here: If you set a property to a React component you will get this error.

[liuyib]

mark a test case:

const NonConfigurableObject = function createNonProxyableObject(): {user: {name: string}} {
  const obj = {}
  Reflect.defineProperty(obj, 'user', { 
    value: { name: "Alice" }, 
    writable: false, 
    configurable: false,
  })
  // Reflect.getOwnPropertyDescriptor(obj, 'user')
  // { value: {…}, writable: false, enumerable: true, configurable: false }
  return obj as any
}();

export default () => {
  const state = useReactive(NonConfigurableObject);

  return (
    <div>
      <div>{state.user.name}</div>
    </div>
  );
};

[liuyib]

这个暂时看无解，见排查过程：#2079 (comment), 后续慢慢研究

[liuyib]

This seems to work: patriksimek/vm2#62 (comment)