React JS：如何在自定义挂钩中使用观察者获取 MobX 存储的状态？

使用案例：

我有一个自定义钩子useFoo需要基于返回值bar属性在存储中，但打字稿抛出错误。

Code:

export const useFoo = observer(() => {
// typescript throws error --^^^^^^^--

  const { bar } = store;

  return bar ? 'x' : 'y';
});

打字稿错误：

Argument of type '() => "x" | "y"' is not assignable to parameter of type 'IReactComponent<any>'.
  Type '() => "x" | "y"' is not assignable to type 'FunctionComponent<any>'.
    Type '"x" | "y"' is not assignable to type 'ReactElement<any, any> | null'.
      Type '"x"' is not assignable to type 'ReactElement<any, any> | null'.ts(2345)

从架构的角度来看，您的概念可能并不完全正确，因为自定义挂钩应该与数据隔离以便可重用

https://github.com/mobxjs/mobx-react-lite/issues/67 https://github.com/mobxjs/mobx-react-lite/issues/67

useDisposable(
  () => mobx.reaction(() => loadingStatusStore.lastRefreshDate,
  refreshDate => {
    // here you can do rest of the `useEffect`, but you need to use that `refreshDate` here,
    // otherwise, MobX won't even bother running it since you are not really using an observed variable.
  }
)