如何使用 MobX obervables 使第 3 方 React 组件（FullCalendar）呈现？

Question

我正在尝试用我自己的功能性 React 组件包装 FullCalendar React 组件，并使用 useContext 钩子来访问 MobX 存储（我最终可能会在其他组件中使用该存储）并 observer() 来实现它对商店的变化做出反应。我的组件按照我的预期做出反应，但我无法在更改后呈现 FullCalendar 组件。

我试过找到一个解决方案，将 <FullCalendar> 包装在 <Observer> 中，尝试 autorun() 和 reaction() 但没有任何效果。我一定是遗漏了什么

此沙箱 https://codesandbox.io/s/mobx-fullcalendar-xejn9 显示了我目前解决方案的简化版本。

单击顶部的按钮会向可观察存储添加一个事件，该事件会显示在其下方的列表中。但是日历不显示新事件。 奇怪的是，如果我更改代码并保存它，CodeSandbox 会导致渲染并且事件会显示在日历中。

Answer 1

感谢@ADyson，我找到了解决方案。而不是将静态事件列表传递给 FullCalendar 组件

events={store.events}

我可以传递一个事件获取函数。因此，在最简单的情况下，我只需将事件从商店传递到 successCallback 函数即可。

events={(fetchInfo, successCallback, failureCallback) => {
  successCallback(store.events);
}}

我也更新了 CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9。