FullCalendar-React-加载函数问题

Question

我正在使用FullCalander v5 for React，测试Resource Timeline视图。我遇到了一个"；加载"；函数，目的是检查Fullcalendar状态，如果加载状态为true，则显示Spinner类型的组件(具有条件渲染(而不是Timeline，并使用useState将Spinner组件状态设置为true。问题是，从渲染方法内部的Fullcalendar组件启动useState会启动无限渲染循环。有什么打破僵局的想法吗？

// Loading function in the container component of Fullcalendar an the useState method

const [spinner, setSpinner] = useState(true);

let loadingFunction = (isLoading) => {
if (isLoading) {
console.log("loading");

setSpinner(true);
} else {
console.log("idle");

setSpinner(false);
}
};

//  The conditional render
return (
<>
{spinner ? (
<Spinner />
) : (
<>

<FullCalendar
loading={loadingFunction}
ref={calendarRef}        
dateClick={handleEventCreate}         
.....

Answer 1

进入相同的状态。我的解决方案，(黑客？(如下。与其让状态变量来控制微调器的呈现，不如添加一个css类来将其从屏幕上删除。然后，我引用了微调器，在FullCalendar的加载阶段，我调用了一个删除了屏幕外类的方法，然后在加载阶段结束后再次添加它。

/**
* @type {{current: HTMLElement}}
*/
const ripple = useRef(null);
const toggleSpinner = useCallback((state) => {
if (ripple.current) {
if (state) {
ripple.current.classList.remove("off-screen");
}
else {
ripple.current.classList.add("off-screen");
}
}
}, [ripple]);
/*...*/
return <>
<div ref={ripple} className="off-screen spinner"></div>
<FullCalendar
loading={s => toggleSpinner(s)}
/>
</>

一切都好Staffan

Answer 2

我认为这个问题可能不仅仅是日历的条件显示。

如果我有：

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

如果我注释掉上面的加载行，它会很好地工作，但如果我想在加载时触发微调器，它会将数据加载放入一个无限循环中。

就像任何事情发生变化时，日历都会重新加载数据。

看起来像是一个bug(或者缺乏文档：https://fullcalendar.io/docs/loading)在带有React的FullCalendar中。

请注意，如果您仅使用initialEvents，则不会执行此操作，但灵活性较低。