如何使用MobX obervables使第三方React组件（FullCalendar）渲染？

我正在尝试使用自己的功能性React组件包装FullCalendar React组件，并使用

useContext

hook访问MobX存储（我最终可能会在其他组件中使用该存储），以及

observer（）

使其对存储中的更改做出反应。我的组件的反应与我预期的一样，但我在更改后使FullCalendar组件呈现时遇到问题

我试图找到一个解决方案，在

中包装

，玩

autorun（）

和

reaction（）

，但没有任何效果。我肯定错过了什么

这个沙盒显示了到目前为止我的解决方案的简化版本

单击顶部的按钮将一个事件添加到可观察的存储中，该存储将显示在下面的列表中。但是日历上没有显示新的活动。

---

奇怪的是，如果我对代码进行更改，保存它，CodeSandbox会导致渲染，事件会显示在日历中。

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

events={store.events}

我可以传递一个事件获取函数。因此，在最简单的情况下，我可以将事件从存储区传递到successCallback函数，它就可以工作了

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

---

我还更新了CodeSandbox。

您正在将静态事件列表传递给fullCalendar。这是一个单向、一次性的过程。FullCalendar获取日历初始化时提供的事件列表的副本。它不知道您何时更新日历之外的列表。有几种不同的方法可以告诉fullCalendar自动获取新事件，或者指示它向日历中添加新事件。看一看。如果您对其中的选项有任何具体问题，请告诉我。@ADyson我知道我一定是做错了什么。我更关注MobX的使用，但没有意识到问题出在FullCalendar的使用上。感谢您为我指明了正确的方向。对于事件的获取，它是有效的，但例如，当您单击时间表时，存储是空的。你知道吗？