fix(useReactive): cannot set a object with read-only and non-configur…

…able property (#2247)

* fix: throw error when set a read-only and non-configurable data property

* style: update

packages/hooks/src/useReactive/__tests__/index.test.tsx

@@ -195,6 +195,36 @@ describe('test useReactive feature', () => {
     expect(() => result.current.v.Module).not.toThrowError();
   });
 
+  it('test JSX element', () => {
+    const hook = renderHook(() => useReactive({ html: <div role="id">foo</div> }));
+    const proxy = hook.result.current;
+    const wrap = render(proxy.html);
+    const html = wrap.getByRole('id');
+
+    expect(html.textContent).toBe('foo');
+    act(() => {
+      proxy.html = <div role="id">bar</div>;
+      wrap.rerender(proxy.html);
+    });
+    expect(html.textContent).toBe('bar');
+    hook.unmount();
+  });
+
+  it('test read-only and non-configurable data property', () => {
+    const obj = {} as { user: { name: string } };
+    Reflect.defineProperty(obj, 'user', {
+      value: { name: 'foo' },
+      writable: false,
+      configurable: false,
+    });
+
+    const hook = renderHook(() => useReactive(obj));
+    const proxy = hook.result.current;
+
+    expect(() => proxy.user.name).not.toThrowError();
+    hook.unmount();
+  });
+
   it('test input1', () => {
     const wrap = render(<Demo />);
 

packages/hooks/src/useReactive/index.ts

@@ -26,6 +26,12 @@ function observer<T extends Record<string, any>>(initialVal: T, cb: () => void):
     get(target, key, receiver) {
       const res = Reflect.get(target, key, receiver);
 
+      // https://github.com/alibaba/hooks/issues/1317
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+      if (!descriptor?.configurable && !descriptor?.writable) {
+        return res;
+      }
+
       // Only proxy plain object or array,
       // otherwise it will cause: https://github.com/alibaba/hooks/issues/2080
       return isPlainObject(res) || Array.isArray(res) ? observer(res, cb) : res;