observer如何监听map对象

[xmsz]

observer(new Map())

会报错

 TypeError: Method Map.prototype.get called on incompatible receiver #<Map>

应该是bind this 和 get size的原因

[liuyib]

哪个 hook?

[xmsz]

这个 https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useReactive/index.ts

[liuyib]

目前 useReactive 不支持这样使用：

const App = () => {
  const state = useReactive(new Map());

  // ❌ will throw: "TypeError: Method Map.prototype.size called on incompatible receiver #<Map>"
  return <div>{state.size}</div>;
};

下面这种使用方式不会报错，但是没法引起组件重新渲染，所以还是不会正常工作：

const App = () => {
  const state = useReactive({
    a: new Map(),
  });

  return (
    <div>
      {/* ✅ no error thrown */}
      {state.a.size}

      {/* ❌ can't cause the component to re-render */}
      <button onClick={() => state.a.set('a', 1)}>update</button>
    </div>
  );
};

综上，目前 useReactive 不兼容 Map, Set。我看了下，想要兼容的话， 处理起来很麻烦，需要实现类似
observer-util 这个包的能力，暂时先不考虑了，我在文档里加上 FAQ

[liuyib]

FAQ: #2243