FullCalendar React设置一个加载状态加载事件

Question

在我的React应用程序中，我使用FullCalendar.io． 关于设置加载的文档有点稀疏(并且不是React特定的)。状态:https://fullcalendar.io/docs/loading

如果我有:

const [loading, setLoading] = useState(false)

…

{loading ? <Spinner /> : null}
<FullCalendar
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
loading={e => setLoading(e)} // With this line, it continually reloads the data source
eventSources={[{
url: '/api/calendar',
method: 'GET',
}]}
/>

如果我注释掉上面的加载行，它可以完美地工作，但如果我想在加载时触发一个指示器，它会将数据加载进入一个无限循环。

就像每当有任何变化时，日历就会重新获取数据。如果我输入

，它会做同样的事情

loading={loadingFunction}

:

function loadingFunction (boolean) {
setLoading(boolean)
}

注意，如果我使用initialEvents ，它不会这样做但这样做的灵活性较差。(然后加载按预期工作。)但是如果使用event或eventSources，它会把它放入一个加载循环中。

Answer 1

似乎在useCallback:

const loadingFunction = useCallback((boolean) => {
setLoading(boolean)
},[setLoading])

和在useMemo中包装FullCalendar:

const fullCalendar = useMemo( () => <FullCalendar ... />  , [loadingFunction] )

解决此问题。希望我没有发现任何缺点……