如何使用 MobX obervables 来渲染第 3 方 React 组件（FullCalendar）？答案

【问题标题】：How to use MobX obervables to cause a 3rd party React Component (FullCalendar) to render?如何使用 MobX obervables 来渲染第 3 方 React 组件（FullCalendar）？
【发布时间】：2020-01-31 13:53:54
【问题描述】：

我正在尝试用我自己的功能性 React 组件包装 FullCalendar React 组件，并使用 useContext 挂钩来访问 MobX 存储（我最终可能会在其他组件中使用该存储）和 observer() 以使其对存储中的更改做出反应.我的组件反应如我所料，但我无法在更改后渲染 FullCalendar 组件。

我尝试找到解决方案，将<FullCalendar> 包装在<Observer> 中，使用autorun() 和reaction()，但没有任何效果。我必须错过一些东西

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

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

【问题讨论】：

您正在将事件的静态列表传递给 fullCalendar。这是一个单向、一次性的过程。 FullCalendar 获取您在初始化日历时提供的事件列表的副本。它不知道您何时在日历之外更新该列表。有几种不同的方法可以告诉 fullCalendar 自动获取新事件，或者指示它向日历添加新事件。看看fullcalendar.io/docs/event-source。如果您对其中的选项有任何具体问题，请告诉我。
@ADyson 我知道我必须做一些根本错误的事情。我更多地关注我对 MobX 的使用，但没有意识到问题出在我对 FullCalendar 的使用上。感谢您为我指明正确的方向。

标签： fullcalendar mobx mobx-react-lite

【解决方案1】：

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

events={store.events}

我可以传递一个事件获取函数。所以在最简单的情况下，我可以将事件从 store 传递给 successCallback 函数，它就可以工作了。

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

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

【讨论】：

它可以获取事件，但是例如当您单击时间表时，商店为空。你有什么想法吗？